diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index 5dfc6fb..9df84a1 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -24,7 +24,7 @@ import { useDrawerAnchor } from './hooks/useDrawerAnchor';
import { NavSidebar } from './components/layout/NavSidebar';
import { BrandMark } from './components/layout/BrandMark';
import { DesktopTopBar } from './components/layout/DesktopTopBar';
-import { DesktopCategoryBar } from './components/layout/DesktopCategoryBar';
+import { CategoryBar } from './components/layout/CategoryBar';
import { useCategories } from './api/queries/useCategories';
import { NotificationMenu } from './components/layout/NotificationMenu';
import { RequireSuperuser } from './components/auth/RequireSuperuser';
@@ -170,7 +170,7 @@ const App: React.FC = () => {
)}
- {!isMobile && }
+
{
+export const CategoryBar = ({ categories }: CategoryBarProps) => {
const { t } = useTranslation();
const location = useLocation();
const { user } = useAuth();
@@ -43,7 +44,7 @@ export const DesktopCategoryBar = ({ categories }: DesktopCategoryBarProps) => {
component="nav"
sx={{
position: 'sticky',
- top: 64,
+ top: { xs: 56, sm: 64 },
zIndex: (theme) => theme.zIndex.appBar - 1,
borderBottom: '1px solid',
borderColor: (theme) => theme.tokens.glass.border,
@@ -57,17 +58,22 @@ export const DesktopCategoryBar = ({ categories }: DesktopCategoryBarProps) => {
sx={{
maxWidth: 1400,
mx: 'auto',
- px: { md: 6 },
+ px: { xs: 1, sm: 4, md: 6 },
display: 'flex',
alignItems: 'center',
- gap: 1,
- minHeight: 52,
+ gap: { xs: 0.5, md: 1 },
+ minHeight: { xs: 46, md: 52 },
overflowX: 'auto',
'&::-webkit-scrollbar': { display: 'none' },
scrollbarWidth: 'none',
}}
>
-