From 4a68bdf169dbf95dfd083dfa76c86ba31c99997d Mon Sep 17 00:00:00 2001
From: estifanos <estifanos.tria@gmail.com>
Date: Tue, 11 Aug 2026 12:24:03 +0000
Subject: [PATCH] UI fixes

---
 libs/ui/src/lib/input/AmharicDatePicker.tsx | 78 +++++++++++++--------
 1 file changed, 47 insertions(+), 31 deletions(-)

diff --git a/libs/ui/src/lib/input/AmharicDatePicker.tsx b/libs/ui/src/lib/input/AmharicDatePicker.tsx
index a9db1b2e4..9423a10a4 100644
--- a/libs/ui/src/lib/input/AmharicDatePicker.tsx
+++ b/libs/ui/src/lib/input/AmharicDatePicker.tsx
@@ -6,7 +6,10 @@ import {
   Group,
   MantineSize,
   Popover,
+  SegmentedControl,
   Select,
+  Stack,
+  Text,
   TextInput,
 } from '@mantine/core';
 import { TimeInput } from '@mantine/dates';
@@ -375,15 +378,21 @@ export function AmharicDatePicker({
               formatWireValue(mergeDateTime(selected, undefined, { hours: h24, minutes: m }), dateFormat, true),
             );
           return (
-            <Group grow mt="sm">
-              <Select
-                label={t('common.time')}
+            <Stack gap={4} mt="sm">
+              <Text size="sm" fw={500}>
+                {t('common.time')}
+              </Text>
+              {/* Full-width 4-way toggle reads better than a dropdown for 4
+                  short Amharic words, and doesn't get squeezed by the
+                  calendar's fixed (auto) popover width the way three
+                  side-by-side Selects did. */}
+              <SegmentedControl
+                fullWidth
+                size="xs"
                 disabled={!selected}
                 value={period}
                 data={ETH_PERIODS.map((p) => ({ value: p.value, label: p.label }))}
-                allowDeselect={false}
                 onChange={(next) => {
-                  if (!next) return;
                   // Keep the same slot index within the new period so the
                   // hour never lands outside its 6-hour range.
                   const slot = Math.max(periodHours.indexOf(hour), 0);
@@ -391,32 +400,39 @@ export function AmharicDatePicker({
                   setTime(fromEthTime(next as EthPeriod, nextHours[slot]), minute);
                 }}
               />
-              <Select
-                label=" "
-                disabled={!selected}
-                value={String(hour)}
-                data={periodHours.map((h) => ({ value: String(h), label: String(h) }))}
-                allowDeselect={false}
-                onChange={(next) => {
-                  if (!next) return;
-                  setTime(fromEthTime(period, Number(next)), minute);
-                }}
-              />
-              <Select
-                label=" "
-                disabled={!selected}
-                value={String(minute).padStart(2, '0')}
-                data={Array.from({ length: 60 }, (_, m) => ({
-                  value: String(m).padStart(2, '0'),
-                  label: String(m).padStart(2, '0'),
-                }))}
-                allowDeselect={false}
-                onChange={(next) => {
-                  if (next == null) return;
-                  setTime(fromEthTime(period, hour), Number(next));
-                }}
-              />
-            </Group>
+              <Group gap={4} justify="center" wrap="nowrap">
+                <Select
+                  disabled={!selected}
+                  value={String(hour)}
+                  data={periodHours.map((h) => ({ value: String(h), label: String(h) }))}
+                  allowDeselect={false}
+                  w={72}
+                  comboboxProps={{ withinPortal: true }}
+                  onChange={(next) => {
+                    if (!next) return;
+                    setTime(fromEthTime(period, Number(next)), minute);
+                  }}
+                />
+                <Text size="sm" c="dimmed">
+                  :
+                </Text>
+                <Select
+                  disabled={!selected}
+                  value={String(minute).padStart(2, '0')}
+                  data={Array.from({ length: 60 }, (_, m) => ({
+                    value: String(m).padStart(2, '0'),
+                    label: String(m).padStart(2, '0'),
+                  }))}
+                  allowDeselect={false}
+                  w={72}
+                  comboboxProps={{ withinPortal: true }}
+                  onChange={(next) => {
+                    if (next == null) return;
+                    setTime(fromEthTime(period, hour), Number(next));
+                  }}
+                />
+              </Group>
+            </Stack>
           );
         })()}