Fix: Implement proper link scrolling in groups using ExpandableGroup component

- Replace all hardcoded group.links.slice(0, 5) with ExpandableGroup component
- Updated renderGridLayout, renderCardsLayout, renderCompactLayout, renderSidebarLayout
- Fixed icon display in ExpandableGroup component
- Improved styling for button-style links
- All group layouts now support expandable link lists with 'Show X more links' functionality

frontend/linktree-frontend/src/app/components/ExpandableGroup.module.css

@@ -41,6 +41,10 @@
   position: relative;
   overflow: hidden;
   border-radius: 10px;
+  border: none;
+  background: white;
+  width: 100%;
+  text-align: left;
   
   &:hover {
     text-decoration: none;
@@ -53,20 +57,19 @@
 .linkInner {
   display: flex;
   align-items: center;
-  padding: 1rem;
-  background: white;
+  padding: 0.75rem;
   border-radius: 10px;
-  border: 1px solid #e9ecef;
   position: relative;
   z-index: 1;
+  width: 100%;
 }
 
 .linkIcon {
-  width: 40px;
-  height: 40px;
+  width: 20px;
+  height: 20px;
   object-fit: cover;
-  border-radius: 8px;
-  margin-right: 1rem;
+  border-radius: 4px;
+  margin-right: 0.75rem;
   flex-shrink: 0;
 }
 
@@ -76,17 +79,18 @@
 }
 
 .linkTitle {
-  margin: 0 0 0.25rem 0;
-  font-size: 1rem;
-  font-weight: 600;
+  margin: 0;
+  font-size: 0.875rem;
+  font-weight: 500;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
+  color: inherit;
 }
 
 .linkDescription {
-  margin: 0;
-  font-size: 0.875rem;
+  margin: 0.25rem 0 0 0;
+  font-size: 0.75rem;
   color: #6c757d;
   white-space: nowrap;
   overflow: hidden;

frontend/linktree-frontend/src/app/components/ExpandableGroup.tsx

@@ -117,7 +117,7 @@ function LinkItem({ link, layout, className = '', overlayColor, overlayOpacity }
         href={link.url}
         target="_blank"
         rel="noopener noreferrer"
-        className={`${styles.linkContent} link-item ${layout}-link`}
+        className={`${styles.linkContent} link-item ${layout}-link btn btn-outline-primary btn-sm d-flex align-items-center justify-content-start`}
       >
         <div className={styles.linkInner}>
           {link.image && (
@@ -128,9 +128,9 @@ function LinkItem({ link, layout, className = '', overlayColor, overlayOpacity }
             />
           )}
           <div className={styles.linkInfo}>
-            <h6 className={styles.linkTitle}>{link.title}</h6>
+            <span className={styles.linkTitle}>{link.title}</span>
             {link.description && (
-              <p className={styles.linkDescription}>{link.description}</p>
+              <small className={styles.linkDescription}>{link.description}</small>
             )}
           </div>
         </div>