fix(frontend): Resolve mobile horizontal scroll in Time Period filters

Co-authored-by: elisiariocouto <818914+elisiariocouto@users.noreply.github.com>

frontend/src/components/AppSidebar.tsx

@@ -27,6 +27,7 @@ import {
   SidebarGroup,
   SidebarGroupContent,
   SidebarGroupLabel,
+  useSidebar,
 } from "./ui/sidebar";
 
 const navigation = [
@@ -39,6 +40,7 @@ const navigation = [
 export function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {
   const location = useLocation();
   const [accountsExpanded, setAccountsExpanded] = useState(false);
+  const { isMobile, setOpenMobile } = useSidebar();
 
   const { data: accounts } = useQuery<Account[]>({
     queryKey: ["accounts"],
@@ -51,6 +53,13 @@ export function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {
       return sum + primaryBalance;
     }, 0) || 0;
 
+  // Handler to close mobile sidebar when navigation item is clicked
+  const handleNavigationClick = () => {
+    if (isMobile) {
+      setOpenMobile(false);
+    }
+  };
+
   return (
     <Sidebar collapsible="icon" className="pt-safe-top pl-safe-left" {...props}>
       <SidebarHeader>
@@ -60,7 +69,7 @@ export function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {
               asChild
               className="data-[slot=sidebar-menu-button]:!p-1.5"
             >
-              <Link to="/" className="flex items-center space-x-2">
+              <Link to="/" className="flex items-center space-x-2" onClick={handleNavigationClick}>
                 <Logo size={24} />
                 <span className="text-base font-semibold">Leggen</span>
               </Link>
@@ -80,7 +89,7 @@ export function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {
                     tooltip={item.name}
                     isActive={location.pathname === item.to}
                   >
-                    <Link to={item.to}>
+                    <Link to={item.to} onClick={handleNavigationClick}>
                       <item.icon className="h-5 w-5" />
                       <span>{item.name}</span>
                     </Link>

frontend/src/components/analytics/TimePeriodFilter.tsx

@@ -15,12 +15,12 @@ export default function TimePeriodFilter({
   className = "",
 }: TimePeriodFilterProps) {
   return (
-    <div className={`flex items-center gap-4 ${className}`}>
+    <div className={`flex flex-col sm:flex-row sm:items-center gap-4 ${className}`}>
       <div className="flex items-center gap-2 text-foreground">
         <Calendar size={20} />
         <span className="font-medium">Time Period:</span>
       </div>
-      <div className="flex gap-2">
+      <div className="flex flex-wrap gap-2">
         {TIME_PERIODS.map((period) => (
           <Button
             key={period.value}