Explorar o código

Give trigger-sized popovers a floor width, and the clocked-time row its name (#419)

Bernt Christian Egeland hai 1 semana
pai
achega
75982092e3

+ 1 - 1
src/app/(authenticated)/settings/report-schedule/report-schedule-settings.tsx

@@ -111,7 +111,7 @@ function RecipientPicker({
             <ChevronsUpDown className="ml-2 h-3.5 w-3.5 opacity-50" />
           </Button>
         </PopoverTrigger>
-        <PopoverContent className="w-(--radix-popover-trigger-width) p-0" align="start">
+        <PopoverContent className="w-(--radix-popover-trigger-width) min-w-64 p-0" align="start">
           <Command>
             <CommandInput placeholder={t('searchMembers')} />
             <CommandList>

+ 4 - 1
src/app/(authenticated)/settings/workshop/workshop-settings.tsx

@@ -231,7 +231,10 @@ export function WorkshopSettings({
                     <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
                   </Button>
                 </PopoverTrigger>
-                <PopoverContent className="w-(--radix-popover-trigger-width) p-0" align="start">
+                <PopoverContent
+                  className="w-(--radix-popover-trigger-width) min-w-64 p-0"
+                  align="start"
+                >
                   <Command shouldFilter={true}>
                     <CommandInput
                       placeholder={t('workshop.technicianPlaceholder')}

+ 4 - 1
src/features/inspections/Components/NewInspectionDialog.tsx

@@ -152,7 +152,10 @@ export function NewInspectionDialog({
                     <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
                   </Button>
                 </PopoverTrigger>
-                <PopoverContent className="w-(--radix-popover-trigger-width) p-0" align="start">
+                <PopoverContent
+                  className="w-(--radix-popover-trigger-width) min-w-64 p-0"
+                  align="start"
+                >
                   <Command>
                     <CommandInput placeholder={t('searchVehicles')} />
                     <CommandList>

+ 4 - 1
src/features/inventory/Components/InventoryPartForm.tsx

@@ -664,7 +664,10 @@ export function InventoryPartForm({
                         <ChevronsUpDown className="ml-2 h-3.5 w-3.5 shrink-0 opacity-50" />
                       </Button>
                     </PopoverTrigger>
-                    <PopoverContent className="w-(--radix-popover-trigger-width) p-0" align="start">
+                    <PopoverContent
+                      className="w-(--radix-popover-trigger-width) min-w-64 p-0"
+                      align="start"
+                    >
                       <Command>
                         <CommandInput
                           placeholder={t('form.categorySearch')}

+ 1 - 1
src/features/inventory/Components/UnitCombobox.tsx

@@ -90,7 +90,7 @@ export function UnitCombobox({
           <ChevronsUpDown className="ml-2 h-3.5 w-3.5 shrink-0 opacity-50" />
         </Button>
       </PopoverTrigger>
-      <PopoverContent className="w-(--radix-popover-trigger-width) p-0" align="start">
+      <PopoverContent className="w-(--radix-popover-trigger-width) min-w-64 p-0" align="start">
         <Command>
           <CommandInput
             placeholder={t('form.unitSearch')}

+ 1 - 1
src/features/quotes/Components/CustomerCombobox.tsx

@@ -124,7 +124,7 @@ export function CustomerCombobox({
           <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
         </Button>
       </PopoverTrigger>
-      <PopoverContent className="w-(--radix-popover-trigger-width) p-0">
+      <PopoverContent className="w-(--radix-popover-trigger-width) min-w-64 p-0">
         <Command shouldFilter={false}>
           <CommandInput placeholder={placeholder} value={search} onValueChange={setSearch} />
           <CommandList ref={listRef} onScroll={handleScroll}>

+ 1 - 1
src/features/team/Components/CountryPicker.tsx

@@ -69,7 +69,7 @@ export function CountryPicker({
       </PopoverTrigger>
 
       {/* Fixed height, so the list does not grow and shrink as it scrolls. */}
-      <PopoverContent className="w-(--radix-popover-trigger-width) p-0" align="start">
+      <PopoverContent className="w-(--radix-popover-trigger-width) min-w-64 p-0" align="start">
         <Command>
           <CommandInput placeholder={t('team.countrySearch')} />
           <CommandList className="max-h-64">

+ 7 - 1
src/features/time-tracking/Components/JobClockSection.tsx

@@ -250,7 +250,13 @@ export function JobClockSection({
                   style={{ backgroundColor: e.technicianColor }}
                   aria-hidden
                 />
-                <span className="min-w-0 flex-1 truncate font-medium">{e.technicianName}</span>
+                {/* The row wraps, so the name is given room before anything else
+                    is: in a narrow column it was squeezed to three letters while
+                    the times and the badge kept their width. The full name is
+                    in the tooltip for the cases the room still is not enough. */}
+                <span className="min-w-32 flex-1 truncate font-medium" title={e.technicianName}>
+                  {e.technicianName}
+                </span>
                 <span className="tabular-nums text-muted-foreground">
                   {formatTime(e.startedAt)}
                   {' – '}

+ 1 - 1
src/features/time-tracking/Components/TimeEntryDialog.tsx

@@ -324,7 +324,7 @@ function JobPicker({
           <ChevronsUpDown className="size-4 shrink-0 opacity-50" />
         </Button>
       </PopoverTrigger>
-      <PopoverContent className="w-(--radix-popover-trigger-width) p-0" align="start">
+      <PopoverContent className="w-(--radix-popover-trigger-width) min-w-64 p-0" align="start">
         <Command shouldFilter={false}>
           <CommandInput placeholder={t('searchJobs')} value={query} onValueChange={setQuery} />
           <CommandList>

+ 1 - 1
src/features/tire-hotel/Components/LocationPicker.tsx

@@ -95,7 +95,7 @@ export function LocationPicker({
             <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
           </Button>
         </PopoverTrigger>
-        <PopoverContent className="w-(--radix-popover-trigger-width) p-0" align="start">
+        <PopoverContent className="w-(--radix-popover-trigger-width) min-w-64 p-0" align="start">
           <Command>
             <CommandInput placeholder={t('checkIn.searchLocations')} />
             <CommandList>

+ 4 - 1
src/features/tire-hotel/Components/NewTireJobDialog.tsx

@@ -366,7 +366,10 @@ export function NewTireJobDialog({
                         <ChevronsUpDown className="h-3.5 w-3.5 shrink-0 opacity-50" />
                       </button>
                     </PopoverTrigger>
-                    <PopoverContent align="start" className="w-(--radix-popover-trigger-width) p-0">
+                    <PopoverContent
+                      align="start"
+                      className="w-(--radix-popover-trigger-width) min-w-64 p-0"
+                    >
                       <Command shouldFilter={false}>
                         <CommandInput
                           value={query}

+ 4 - 1
src/features/vehicles/Components/VehicleForm.tsx

@@ -451,7 +451,10 @@ export function VehicleForm({
                       <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
                     </Button>
                   </PopoverTrigger>
-                  <PopoverContent className="w-(--radix-popover-trigger-width) p-0" align="start">
+                  <PopoverContent
+                    className="w-(--radix-popover-trigger-width) min-w-64 p-0"
+                    align="start"
+                  >
                     <Command>
                       <CommandInput placeholder={t('searchCustomers')} />
                       <CommandList className="max-h-60 overflow-y-auto">

+ 1 - 1
src/features/vehicles/Components/service-edit/ScheduleTimesSection.tsx

@@ -415,7 +415,7 @@ export function ScheduleTimesSection({
       : null
 
   const techPickerContent = (
-    <PopoverContent className="w-(--radix-popover-trigger-width) p-0" align="start">
+    <PopoverContent className="w-(--radix-popover-trigger-width) min-w-64 p-0" align="start">
       <Command shouldFilter={true}>
         <CommandInput
           placeholder={t('searchOrCreate')}