From 7b8ee07b915225afc8e99d0cc82752774b2f8bed Mon Sep 17 00:00:00 2001
From: Amirhossein Khalili <amirhosseinkhalili901@gmail.com>
Date: Fri, 21 Aug 2026 16:43:16 +0800
Subject: [PATCH] fix: correct narrow shell and calendar layout

---
 src/lib/components/AppShell.svelte     |  4 ++--
 src/lib/components/PeriodPicker.svelte | 14 +++++++++-----
 2 files changed, 11 insertions(+), 7 deletions(-)

diff --git a/src/lib/components/AppShell.svelte b/src/lib/components/AppShell.svelte
index 5e490c3..5e521ab 100644
--- a/src/lib/components/AppShell.svelte
+++ b/src/lib/components/AppShell.svelte
@@ -82,7 +82,7 @@
           <span class="text-primary-foreground/70 block truncate text-[11px]">حساب تحلیل پذیرنده</span>
         </div>
       </div>
-      <div class="group-data-[collapsible=icon]:hidden">
+      <div class="hidden md:block group-data-[collapsible=icon]:hidden">
         <label class="text-muted-foreground mb-1 block text-[11px]" for="sidebar-terminal-select"
           >درگاه فعال گزارش</label
         >
@@ -145,7 +145,7 @@
     <div class="flex w-full items-center justify-between">
       <div class="flex items-center gap-2">
         <Sidebar.Trigger class="size-11" aria-label="باز و بسته کردن منو"><MenuIcon /></Sidebar.Trigger>
-        <BrandLogo />
+        <span class="hidden sm:block"><BrandLogo /></span>
       </div>
       <div class="flex items-center gap-1">
         <label class="sr-only" for="mobile-terminal-select">درگاه فعال گزارش</label>
diff --git a/src/lib/components/PeriodPicker.svelte b/src/lib/components/PeriodPicker.svelte
index 09a57ac..e2eafc5 100644
--- a/src/lib/components/PeriodPicker.svelte
+++ b/src/lib/components/PeriodPicker.svelte
@@ -127,12 +127,16 @@
       <p class="text-muted-foreground mt-1 text-xs">فقط بازه‌هایی که داده کامل دارند قابل انتخاب‌اند.</p>
     </div>
 
-    <div class={range === 'day' || range === 'week' ? 'grid grid-cols-2 gap-2' : ''}>
-      <label class="grid gap-1.5 text-xs font-medium" for="reporting-year">
+    <div
+      class={range === 'day' || range === 'week'
+        ? 'grid grid-cols-[minmax(0,1fr)_minmax(0,1fr)] gap-2'
+        : ''}
+    >
+      <label class="grid min-w-0 gap-1.5 text-xs font-medium" for="reporting-year">
         سال گزارش
         <input
           id="reporting-year"
-          class="border-input bg-background focus-visible:border-ring focus-visible:ring-ring/30 min-h-11 rounded-md border px-3 text-sm outline-none focus-visible:ring-1 sm:min-h-9"
+          class="border-input bg-background focus-visible:border-ring focus-visible:ring-ring/30 min-h-11 w-full min-w-0 rounded-md border px-3 text-sm outline-none focus-visible:ring-1 sm:min-h-9"
           type="text"
           inputmode="numeric"
           maxlength="4"
@@ -144,11 +148,11 @@
       </label>
 
       {#if range === 'day' || range === 'week'}
-        <label class="grid gap-1.5 text-xs font-medium" for="reporting-month">
+        <label class="grid min-w-0 gap-1.5 text-xs font-medium" for="reporting-month">
           ماه
           <select
             id="reporting-month"
-            class="border-input bg-background focus-visible:border-ring focus-visible:ring-ring/30 min-h-11 cursor-pointer rounded-md border px-3 text-sm outline-none focus-visible:ring-1 sm:min-h-9"
+            class="border-input bg-background focus-visible:border-ring focus-visible:ring-ring/30 min-h-11 w-full min-w-0 cursor-pointer rounded-md border px-3 text-sm outline-none focus-visible:ring-1 sm:min-h-9"
             value={calendarMonth}
             onchange={(event) => (calendarMonth = Number(event.currentTarget.value))}
           >