fix: some styled for collections and links

inertia/components/dashboard/collection/collection_container.tsx

@@ -1,15 +1,11 @@
 import styled from '@emotion/styled';
-import { Link } from '@inertiajs/react';
-import { RxHamburgerMenu } from 'react-icons/rx';
-import CollectionControls from '~/components/dashboard/collection/header/collection_controls';
-import CollectionDescription from '~/components/dashboard/collection/header/collection_description';
 import CollectionHeader from '~/components/dashboard/collection/header/collection_header';
 import LinkList from '~/components/dashboard/link/link_list';
 import { NoCollection } from '~/components/dashboard/link/no_item';
 import Footer from '~/components/footer/footer';
 import useActiveCollection from '~/hooks/use_active_collection';
 
-const LinksWrapper = styled.div({
+const CollectionContainerStyle = styled.div({
   height: '100%',
   minWidth: 0,
   padding: '0.5em 0.5em 0',
@@ -18,28 +14,14 @@ const LinksWrapper = styled.div({
   flexDirection: 'column',
 });
 
-const CollectionHeaderWrapper = styled.h2(({ theme }) => ({
-  fontWeight: 400,
-  color: theme.colors.font,
-  paddingInline: '0.8em 1.1em',
-  display: 'flex',
-  gap: '0.4em',
-  alignItems: 'center',
-  justifyContent: 'space-between',
-
-  '& > svg': {
-    display: 'flex',
-  },
-}));
-
 interface CollectionContainerProps {
   isMobile: boolean;
   openSideMenu: () => void;
 }
 
 export default function CollectionContainer({
-  isMobile,
+  isMobile: _,
-  openSideMenu,
+  openSideMenu: __,
 }: Readonly<CollectionContainerProps>) {
   const { activeCollection } = useActiveCollection();
 
@@ -48,26 +30,10 @@ export default function CollectionContainer({
   }
 
   return (
-    <LinksWrapper>
+    <CollectionContainerStyle>
-      <CollectionHeaderWrapper>
+      <CollectionHeader />
-        {isMobile && (
-          <Link
-            href="/#"
-            onClick={(event) => {
-              event.preventDefault();
-              openSideMenu();
-            }}
-            title="Open side nav bar"
-          >
-            <RxHamburgerMenu size={'1.5em'} />
-          </Link>
-        )}
-        <CollectionHeader />
-        <CollectionControls collectionId={activeCollection.id} />
-      </CollectionHeaderWrapper>
-      <CollectionDescription />
       <LinkList links={activeCollection.links} />
       <Footer />
-    </LinksWrapper>
+    </CollectionContainerStyle>
   );
 }

inertia/components/dashboard/collection/header/collection_description.tsx

@@ -2,8 +2,8 @@ import styled from '@emotion/styled';
 import useActiveCollection from '~/hooks/use_active_collection';
 
 const CollectionDescriptionStyle = styled.p({
-  fontSize: '0.85em',
+  fontSize: '0.85rem',
-  marginBottom: '0.5em',
+  marginBottom: '0.5rem',
 });
 
 export default function CollectionDescription() {

inertia/components/dashboard/collection/header/collection_header.tsx

@@ -1,24 +1,37 @@
 import styled from '@emotion/styled';
 import { Fragment } from 'react';
 import { useTranslation } from 'react-i18next';
+import TextEllipsis from '~/components/common/text_ellipsis';
+import CollectionControls from '~/components/dashboard/collection/header/collection_controls';
+import CollectionDescription from '~/components/dashboard/collection/header/collection_description';
 import VisibilityBadge from '~/components/visibilty/visibilty';
 import useActiveCollection from '~/hooks/use_active_collection';
 
-const CollectionNameWrapper = styled.div({
+const paddingLeft = '1.25em';
+const paddingRight = '1.65em';
+
+const CollectionHeaderWrapper = styled.div({
   minWidth: 0,
   width: '100%',
-  display: 'flex',
+  paddingInline: `${paddingLeft} ${paddingRight}`,
-  gap: '0.35em',
-  flex: 1,
-  alignItems: 'center',
 });
 
-const CollectionName = styled.div(({ theme }) => ({
+const CollectionHeaderStyle = styled.div({
-  minWidth: 0,
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'space-between',
+
+  '& > svg': {
+    display: 'flex',
+  },
+});
+
+const CollectionName = styled.h2(({ theme }) => ({
+  width: `calc(100% - (${paddingLeft} + ${paddingRight}))`,
   color: theme.colors.primary,
-  textOverflow: 'ellipsis',
+  display: 'flex',
-  whiteSpace: 'nowrap',
+  gap: '0.35em',
-  overflow: 'hidden',
+  alignItems: 'center',
 }));
 
 const LinksCount = styled.div(({ theme }) => ({
@@ -36,13 +49,19 @@ export default function CollectionHeader() {
 
   const { name, links, visibility } = activeCollection;
   return (
-    <CollectionNameWrapper>
+    <CollectionHeaderWrapper>
-      <CollectionName>{name}</CollectionName>
+      <CollectionHeaderStyle>
-      {links.length > 0 && <LinksCount> — {links.length}</LinksCount>}
+        <CollectionName title={name}>
-      <VisibilityBadge
+          <TextEllipsis>{name}</TextEllipsis>
-        label={t('collection.visibility')}
+          {links.length > 0 && <LinksCount> — {links.length}</LinksCount>}
-        visibility={visibility}
+          <VisibilityBadge
-      />
+            label={t('collection.visibility')}
-    </CollectionNameWrapper>
+            visibility={visibility}
+          />
+        </CollectionName>
+        <CollectionControls collectionId={activeCollection.id} />
+      </CollectionHeaderStyle>
+      <CollectionDescription />
+    </CollectionHeaderWrapper>
   );
 }

inertia/components/dashboard/collection/list/collection_item.tsx

@@ -13,6 +13,13 @@ const CollectionItemStyle = styled(Item)<{ isActive: boolean }>(
   })
 );
 
+const LinksCount = styled.div(({ theme }) => ({
+  minWidth: 'fit-content',
+  fontWeight: 300,
+  fontSize: '0.9rem',
+  color: theme.colors.grey,
+}));
+
 export default function CollectionItem({
   collection,
 }: {
@@ -27,8 +34,11 @@ export default function CollectionItem({
       onClick={() => setActiveCollection(collection)}
       isActive={isActiveCollection}
     >
-      <FolderIcon size={24} />
+      <FolderIcon css={{ minWidth: '24px' }} size={24} />
       <TextEllipsis>{collection.name}</TextEllipsis>
+      {collection.links.length > 0 && (
+        <LinksCount>— {collection.links.length}</LinksCount>
+      )}
     </CollectionItemStyle>
   );
 }

inertia/components/dashboard/side_nav/nav_item.tsx

@@ -2,7 +2,6 @@ import styled from '@emotion/styled';
 import { Link } from '@inertiajs/react';
 
 export const Item = styled.div(({ theme }) => ({
-  cursor: 'pointer',
   userSelect: 'none',
   height: '40px',
   width: '250px',
@@ -21,6 +20,7 @@ export const Item = styled.div(({ theme }) => ({
 
   // Disable hover effect for UserCard
   '&:hover:not(.disable-hover)': {
+    cursor: 'pointer',
     backgroundColor: theme.colors.secondary,
     outlineWidth: '1px',
     outlineStyle: 'solid',