Fix Share button visibility in iPad portrait mode with long descriptions (microsoft#11048)

* Initial plan

* Fix Share button cut off in iPad portrait mode

Co-authored-by: abchatra <6107272+abchatra@users.noreply.github.com>

* Add responsive button styling for mobile devices

Co-authored-by: abchatra <6107272+abchatra@users.noreply.github.com>

* Remove !important and increase CSS specificity

Co-authored-by: abchatra <6107272+abchatra@users.noreply.github.com>

* Add scrollable description container to fix Share button visibility

Co-authored-by: jwunderl <5615930+jwunderl@users.noreply.github.com>

---------

Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com>
Co-authored-by: abchatra <6107272+abchatra@users.noreply.github.com>
Co-authored-by: jwunderl <5615930+jwunderl@users.noreply.github.com>
Co-authored-by: Joey Wunderlich <jwunderl@users.noreply.github.com>

Author: 3 people

theme/home.less

@@ -317,6 +317,11 @@
             color: var(--pxt-neutral-foreground3);
             margin-bottom: 1rem;
         }
+        .description-container {
+            max-height: 8rem;
+            overflow-y: auto;
+            margin-bottom: 0.5rem;
+        }
         .detail {
             color: var(--pxt-neutral-foreground3);
         }

webapp/src/projects.tsx

@@ -1232,11 +1232,13 @@ export class ProjectsDetail extends data.Component<ProjectsDetailProps, Projects
                     {tags && <div className="ui labels">
                         {tags.map(tag => <div className={`ui ${tagColors[tag] || ''} label`}>{pxt.Util.rlf(tag)}
                         </div>)}</div>}
-                    {descriptions && descriptions.map((desc, index) => {
-                        return <p key={`line${index}`} className="detail">
-                            {desc}
-                        </p>
-                    })}
+                    <div className="description-container">
+                        {descriptions && descriptions.map((desc, index) => {
+                            return <p key={`line${index}`} className="detail">
+                                {desc}
+                            </p>
+                        })}
+                    </div>
                     {!!cardType && youTubeWatchUrl && this.isYouTubeOnline() &&
                         // show youtube card
                         // thumbnail url `https://img.youtube.com/vi/${youTubeId}/default.jpg`