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;