AI: address review on PR #456

frontend/src/components/TagDetailSidebar.test.tsx

@@ -39,18 +39,6 @@ describe ('TagDetailSidebar', () => {
     vi.clearAllMocks ()
   })
 
-  it ('inherits the sidebar width saved by the post list', () => {
-    localStorage.setItem ('sidebar:posts-index-tags:left:width', '320')
-
-    const { container } = renderWithProviders (
-	<TagDetailSidebar post={buildPost ()}/>)
-    const sidebar = container.querySelector<HTMLElement> (
-	'[style*="--sidebar-width"]')
-
-    expect (sidebar).toBeInTheDocument ()
-    expect (sidebar?.style.getPropertyValue ('--sidebar-width')).toBe ('320px')
-  })
-
   it ('keeps internal and external tags with the same numeric id in flat mode', () => {
     setClientTagRelationDisplayMode ('flat')
 

frontend/src/components/TagDetailSidebar.tsx

@@ -378,7 +378,7 @@ const TagDetailSidebar: FC<Props> = ({ className, post, sp }) => {
   }, [baseTags])
 
   return (
-      <SidebarComponent sidebarKey="posts-index-tags" className={className}>
+      <SidebarComponent sidebarKey="post-detail-tags" className={className}>
 	<TagSearch/>
 	<DndContext
 	    sensors={sensors}

frontend/src/components/layout/SidebarComponent.test.tsx

@@ -70,6 +70,16 @@ describe ('SidebarComponent', () => {
     vi.spyOn (HTMLElement.prototype, 'hasPointerCapture').mockReturnValue (true)
   })
 
+  it ('limits sidebar scrolling to desktop to avoid clipping mobile suggestions', () => {
+    renderSidebar ()
+
+    // jsdom has no layout; guard the responsive classes responsible for clipping.
+    const sidebar = screen.getByText ('Sidebar body')
+
+    expect (sidebar).not.toHaveClass ('overflow-y-auto')
+    expect (sidebar).toHaveClass ('md:overflow-y-auto')
+  })
+
   it ('uses maxWidth without applying the container main-width reserve twice', async () => {
     localStorage.setItem ('sidebar:test-sidebar:left:width', '700')
     const onWidthChange = vi.fn ()

frontend/src/components/layout/SidebarComponent.tsx

@@ -339,7 +339,7 @@ const SidebarComponent: FC<Props> = ({
 	  </style>
 	</Helmet>
 
-	<div className="h-full overflow-y-auto p-4 sidebar">
+	<div className="h-full md:overflow-y-auto p-4 sidebar">
 	  {children}
 	</div>