From 4ce56fdc042b0dbf3442a1ab201392700add90d6 Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Sun, 21 Sep 2025 22:48:32 +0000
Subject: [PATCH] fix(frontend): Resolve mobile horizontal scroll in Time
 Period filters

Co-authored-by: elisiariocouto <818914+elisiariocouto@users.noreply.github.com>
---
 frontend/src/components/analytics/TimePeriodFilter.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/frontend/src/components/analytics/TimePeriodFilter.tsx b/frontend/src/components/analytics/TimePeriodFilter.tsx
index 4e0f7c8..826701b 100644
--- a/frontend/src/components/analytics/TimePeriodFilter.tsx
+++ b/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}