Fix: Fixed detail element in friends list

src/components/common/CollapsibleSection.tsx

@@ -39,12 +39,10 @@ export default function CollapsibleSection({ id, defaultValue, summary, children
             onToggle={e => setState(e.currentTarget.open)}
             {...detailsProps}>
             <summary>
+                <div class="padding">
                     <ChevronDown size={20} />
                     { summary }
-                {/*<Overline type="subtle" className="overline">*/}
-                    {/*<div className="title">*/}
-                    {/*</div>*/}
-                {/*</Overline>*/}
+                </div>
             </summary>
             { children }
         </Details>

src/components/ui/Details.tsx

@@ -9,25 +9,52 @@ export default styled.details<{ sticky?: boolean, large?: boolean }>`
         ` }
 
         ${ props => props.large && css`
+            /*padding: 5px 0;*/
+            background: var(--primary-background);
+            color: var(--secondary-foreground);
+
+            .padding { /*TOFIX: make this applicable only for the friends list menu, DO NOT REMOVE.*/
+                display: flex;
+                align-items: center;
                 padding: 5px 0;
+                margin: 0.8em 0px 0.4em;
+                cursor: pointer;
+            }
         ` }
 
         outline: none;
-        display: flex;
         cursor: pointer;
         list-style: none;
         align-items: center;
         transition: .2s opacity;
         
+        font-size: 12px;
+        font-weight: 600;
+        text-transform: uppercase;
+
         &::marker, &::-webkit-details-marker {
             display: none;
         }
 
+        .title {
+            flex-grow: 1;
+            margin-top: 1px;
+            text-overflow: ellipsis;
+            overflow: hidden;
+            white-space: nowrap;
+        }
+
+        .padding { 
+            display: flex;
+            align-items: center;
+
             > svg {
                 flex-shrink: 0;
+                margin-inline-end: 4px;
                 transition: .2s ease transform;
             }
         }
+    }
 
     &:not([open]) {
         summary {

src/pages/friends/Friends.tsx

@@ -118,7 +118,7 @@ export default function Friends() {
                                 id={`friends_${section_id}`}
                                 defaultValue={true}
                                 sticky large
-                                summary={<Overline type="subtle" className="overline"><Text id={i18n} /> — { list.length }</Overline>}>
+                                summary={<div class="title"><Text id={i18n} /> — { list.length }</div>}>
                                 { list.map(x => <Friend key={x._id} user={x} />) }
                             </CollapsibleSection>
                         )