fix(web): Fix sidebar lists getting opened on edit

2 files changed, 21 insertions, 20 deletions

diff --git a/apps/web/components/dashboard/sidebar/AllLists.tsx b/apps/web/components/dashboard/sidebar/AllLists.tsx
index 8296dafa..fff8d64d 100644
--- a/apps/web/components/dashboard/sidebar/AllLists.tsx
+++ b/apps/web/components/dashboard/sidebar/AllLists.tsx
@@ -47,12 +47,14 @@ export default function AllLists({
         name={t("lists.all_lists")}
         path={`/dashboard/lists`}
         linkClassName="py-0.5"
+        className="px-0.5"
       />
       <SidebarItem
         logo={<span className="text-lg">⭐️</span>}
         name={t("lists.favourites")}
         path={`/dashboard/favourites`}
         linkClassName="py-0.5"
+        className="px-0.5"
       />
       <CollapsibleBookmarkLists
         initialData={initialData.lists}
@@ -62,7 +64,7 @@ export default function AllLists({
             collapseButton={
               node.children.length > 0 && (
                 <CollapsibleTriggerTriangle
-                  className="absolute left-0 top-1/2 size-2 -translate-y-1/2"
+                  className="absolute left-0.5 top-1/2 size-2 -translate-y-1/2"
                   open={open}
                 />
               )
@@ -74,6 +76,7 @@ export default function AllLists({
             }
             name={node.item.name}
             path={`/dashboard/lists/${node.item.id}`}
+            className="px-0.5"
             right={
               <ListOptions
                 onOpenChange={(open) => {
diff --git a/apps/web/components/shared/sidebar/SidebarItem.tsx b/apps/web/components/shared/sidebar/SidebarItem.tsx
index c862cc83..cfbd7253 100644
--- a/apps/web/components/shared/sidebar/SidebarItem.tsx
+++ b/apps/web/components/shared/sidebar/SidebarItem.tsx
@@ -28,30 +28,28 @@ export default function SidebarItem({
   return (
     <li
       className={cn(
-        "relative rounded-lg hover:bg-accent",
+        "relative flex justify-between rounded-lg hover:bg-accent",
         path == currentPath ? "bg-accent/50" : "",
         className,
       )}
       style={style}
     >
-      {collapseButton}
-      <Link
-        href={path}
-        className={cn(
-          "flex w-full items-center rounded-[inherit] px-3 py-2",
-          linkClassName,
-        )}
-      >
-        <div className="flex w-full justify-between">
-          <div className="flex items-center gap-x-2">
-            {logo}
-            <span title={name} className="line-clamp-1">
-              {name}
-            </span>
-          </div>
-          {right}
-        </div>
-      </Link>
+      <div className="flex-1">
+        {collapseButton}
+        <Link
+          href={path}
+          className={cn(
+            "flex items-center gap-x-2 rounded-[inherit] px-3 py-2",
+            linkClassName,
+          )}
+        >
+          {logo}
+          <span title={name} className="line-clamp-1 break-all">
+            {name}
+          </span>
+        </Link>
+      </div>
+      {right}
     </li>
   );
 }