Add scrollable description container to fix Share button visibility

Co-authored-by: jwunderl <[email protected]>

Author: Copilot

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);
         }
@@ -639,14 +644,6 @@
             }
         }
         .detailview {
-            .column.six.wide .yt-button.button.large,
-            .column.six.wide button.home-share-button.button.large {
-                display: block;
-                width: 100%;
-                margin-bottom: 0.5rem;
-                font-size: 1rem;
-                padding: 0.7rem 1rem;
-            }
             .actions .card-action {
                 max-width: 10rem;
                 .button.attached .icon:not(.xicon) {
@@ -785,14 +782,6 @@
         }
 
         .detailview {
-            .column.six.wide .yt-button.button.large,
-            .column.six.wide button.home-share-button.button.large {
-                display: block;
-                width: 100%;
-                margin-bottom: 0.5rem;
-                font-size: 0.9rem;
-                padding: 0.5rem 0.75rem;
-            }
             .column:first-child {
                 height: auto;
                 overflow: visible;

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`