feat(ui): enhance endpoint selection and date picker

web/default/src/components/datetime-picker.tsx

@@ -57,6 +57,7 @@ export function DateTimePicker({
   const placeholderText = placeholder ?? t('Select date')
   const placeholderText = placeholder ?? t('Select date')
   const calendarLocale =
   const calendarLocale =
     calendarLocales[i18n.language as keyof typeof calendarLocales] ?? enUS
     calendarLocales[i18n.language as keyof typeof calendarLocales] ?? enUS
+  const currentYear = new Date().getFullYear()
   const [open, setOpen] = React.useState(false)
   const [open, setOpen] = React.useState(false)
   const [date, setDate] = React.useState<Date | undefined>(value)
   const [date, setDate] = React.useState<Date | undefined>(value)
   const [month, setMonth] = React.useState<Date | undefined>(value)
   const [month, setMonth] = React.useState<Date | undefined>(value)
@@ -134,6 +135,8 @@ export function DateTimePicker({
             captionLayout='dropdown'
             captionLayout='dropdown'
             onSelect={handleDateSelect}
             onSelect={handleDateSelect}
             locale={calendarLocale}
             locale={calendarLocale}
+            startMonth={new Date(currentYear - 100, 0)}
+            endMonth={new Date(currentYear + 100, 11)}
           />
           />
         </PopoverContent>
         </PopoverContent>
       </Popover>
       </Popover>

web/default/src/features/channels/components/dialogs/channel-test-dialog.tsx

@@ -190,6 +190,10 @@ const endpointTypeOptions: Array<{ value: string; label: string }> = [
   { value: 'embeddings', label: 'Embeddings (/v1/embeddings)' },
   { value: 'embeddings', label: 'Embeddings (/v1/embeddings)' },
 ]
 ]
 
 
+const endpointSelectContentClass = 'w-[460px] max-w-[calc(100vw-2rem)]'
+const endpointSelectItemClass =
+  'items-start py-2 [&_[data-slot=select-item-text]]:min-w-0 [&_[data-slot=select-item-text]]:shrink [&_[data-slot=select-item-text]]:whitespace-normal'
+
 const STREAM_INCOMPATIBLE_ENDPOINTS = new Set([
 const STREAM_INCOMPATIBLE_ENDPOINTS = new Set([
   'embeddings',
   'embeddings',
   'image-generation',
   'image-generation',
@@ -927,14 +931,26 @@ function ChannelTestDialogContent({
                 value={endpointType}
                 value={endpointType}
                 onValueChange={handleEndpointTypeChange}
                 onValueChange={handleEndpointTypeChange}
               >
               >
-                <SelectTrigger id='endpoint-type'>
-                  <SelectValue placeholder={t('Auto detect (default)')} />
+                <SelectTrigger id='endpoint-type' className='w-full min-w-0'>
+                  <SelectValue
+                    className='min-w-0 truncate'
+                    placeholder={t('Auto detect (default)')}
+                  />
                 </SelectTrigger>
                 </SelectTrigger>
-                <SelectContent alignItemWithTrigger={false}>
+                <SelectContent
+                  alignItemWithTrigger={false}
+                  className={endpointSelectContentClass}
+                >
                   <SelectGroup>
                   <SelectGroup>
                     {endpointSelectItems.map((option) => (
                     {endpointSelectItems.map((option) => (
-                      <SelectItem key={option.value} value={option.value}>
-                        {option.label}
+                      <SelectItem
+                        key={option.value}
+                        value={option.value}
+                        className={endpointSelectItemClass}
+                      >
+                        <span className='min-w-0 whitespace-normal break-words leading-snug'>
+                          {option.label}
+                        </span>
                       </SelectItem>
                       </SelectItem>
                     ))}
                     ))}
                   </SelectGroup>
                   </SelectGroup>