From 5a01c6fe5306e38bfd71b8136c1372275e140ee5 Mon Sep 17 00:00:00 2001
From: Rajat yadav <yadavrajat1210@gmail.com>
Date: Mon, 8 Dec 2025 20:32:11 +0530
Subject: [PATCH] fix: hide filter and action buttons on tablet screens to
 prevent UI overflow

Changed responsive breakpoints from sm: to lg: for filter buttons, Add Task, and Sync buttons. BottomBar now shows on tablets (640px-1024px) like mobile devices.

Fixes #221
---
 .../src/components/HomeComponents/BottomBar/BottomBar.tsx | 2 +-
 .../__tests__/__snapshots__/BottomBar.test.tsx.snap       | 6 +++---
 frontend/src/components/HomeComponents/Tasks/Tasks.tsx    | 8 ++++----
 3 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/frontend/src/components/HomeComponents/BottomBar/BottomBar.tsx b/frontend/src/components/HomeComponents/BottomBar/BottomBar.tsx
index 4931a51a..b0726065 100644
--- a/frontend/src/components/HomeComponents/BottomBar/BottomBar.tsx
+++ b/frontend/src/components/HomeComponents/BottomBar/BottomBar.tsx
@@ -23,7 +23,7 @@ const BottomBar: React.FC<BottomBarProps> = ({
   setSelectedTag,
 }) => {
   return (
-    <header className="sm:hidden fixed bottom-0 w-full bg-white border-t-[1px] dark:border-b-slate-700 dark:bg-background shadow-lg flex justify-between items-center p-4 z-40">
+    <header className="lg:hidden fixed bottom-0 w-full bg-white border-t-[1px] dark:border-b-slate-700 dark:bg-background shadow-lg flex justify-between items-center p-4 z-40">
       {/* Nav Links */}
       <NavigationMenu className="mx-auto">
         <div className="flex space-x-4 mr-2">
diff --git a/frontend/src/components/HomeComponents/BottomBar/__tests__/__snapshots__/BottomBar.test.tsx.snap b/frontend/src/components/HomeComponents/BottomBar/__tests__/__snapshots__/BottomBar.test.tsx.snap
index 813617d3..1eceb0c1 100644
--- a/frontend/src/components/HomeComponents/BottomBar/__tests__/__snapshots__/BottomBar.test.tsx.snap
+++ b/frontend/src/components/HomeComponents/BottomBar/__tests__/__snapshots__/BottomBar.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`BottomBar Component using Snapshot renders correctly with only one selected props: Bottom bar with only one selected props 1`] = `
 <DocumentFragment>
   <header
-    class="sm:hidden fixed bottom-0 w-full bg-white border-t-[1px] dark:border-b-slate-700 dark:bg-background shadow-lg flex justify-between items-center p-4 z-40"
+    class="lg:hidden fixed bottom-0 w-full bg-white border-t-[1px] dark:border-b-slate-700 dark:bg-background shadow-lg flex justify-between items-center p-4 z-40"
   >
     <nav
       aria-label="Main"
@@ -96,7 +96,7 @@ exports[`BottomBar Component using Snapshot renders correctly with only one sele
 exports[`BottomBar Component using Snapshot renders correctly with several selected props: Bottom bar with several selected props 1`] = `
 <DocumentFragment>
   <header
-    class="sm:hidden fixed bottom-0 w-full bg-white border-t-[1px] dark:border-b-slate-700 dark:bg-background shadow-lg flex justify-between items-center p-4 z-40"
+    class="lg:hidden fixed bottom-0 w-full bg-white border-t-[1px] dark:border-b-slate-700 dark:bg-background shadow-lg flex justify-between items-center p-4 z-40"
   >
     <nav
       aria-label="Main"
@@ -189,7 +189,7 @@ exports[`BottomBar Component using Snapshot renders correctly with several selec
 exports[`BottomBar Component using Snapshot renders correctly without selected props: Bottom bar without selected props 1`] = `
 <DocumentFragment>
   <header
-    class="sm:hidden fixed bottom-0 w-full bg-white border-t-[1px] dark:border-b-slate-700 dark:bg-background shadow-lg flex justify-between items-center p-4 z-40"
+    class="lg:hidden fixed bottom-0 w-full bg-white border-t-[1px] dark:border-b-slate-700 dark:bg-background shadow-lg flex justify-between items-center p-4 z-40"
   >
     <nav
       aria-label="Main"
diff --git a/frontend/src/components/HomeComponents/Tasks/Tasks.tsx b/frontend/src/components/HomeComponents/Tasks/Tasks.tsx
index d9bf20e5..e2c990a8 100644
--- a/frontend/src/components/HomeComponents/Tasks/Tasks.tsx
+++ b/frontend/src/components/HomeComponents/Tasks/Tasks.tsx
@@ -896,7 +896,7 @@ export const Tasks = (
                       options={uniqueProjects}
                       selectedValues={selectedProjects}
                       onSelectionChange={setSelectedProjects}
-                      className="hidden sm:flex min-w-[140px]"
+                      className="hidden lg:flex min-w-[140px]"
                       icon={<Key lable="p" />}
                     />
                     <MultiSelectFilter
@@ -905,7 +905,7 @@ export const Tasks = (
                       options={status}
                       selectedValues={selectedStatuses}
                       onSelectionChange={setSelectedStatuses}
-                      className="hidden sm:flex min-w-[140px]"
+                      className="hidden lg:flex min-w-[140px]"
                       icon={<Key lable="s" />}
                     />
                     <MultiSelectFilter
@@ -914,7 +914,7 @@ export const Tasks = (
                       options={uniqueTags}
                       selectedValues={selectedTags}
                       onSelectionChange={setSelectedTags}
-                      className="hidden sm:flex min-w-[140px]"
+                      className="hidden lg:flex min-w-[140px]"
                       icon={<Key lable="t" />}
                     />
                     <div className="pr-2">
@@ -931,7 +931,7 @@ export const Tasks = (
                         uniqueProjects={uniqueProjects}
                       />
                     </div>
-                    <div className="hidden sm:flex flex-col items-end gap-2">
+                    <div className="flex flex-col items-end gap-2">
                       <Button
                         id="sync-task"
                         variant="outline"