Fit image parameter select labels

This commit is contained in:
Codex
2026-05-13 02:19:23 +00:00
parent 8bc18c6cd8
commit ae6fd626b1
2 changed files with 10 additions and 10 deletions

View File

@@ -615,11 +615,11 @@ export function ImageToImagePanel() {
</div>
{/* Image Params */}
<div className="grid grid-cols-2 gap-x-4 gap-y-3 lg:grid-cols-4">
<div className="grid grid-cols-2 gap-x-3 gap-y-3 lg:grid-cols-[minmax(7.75rem,1.2fr)_minmax(5.75rem,0.9fr)_minmax(5.75rem,0.9fr)_minmax(5.75rem,0.9fr)]">
<div className="min-w-0 space-y-2">
<Label></Label>
<Select value={aspectRatio} onValueChange={setAspectRatio}>
<SelectTrigger className="w-full min-w-0"><SelectValue /></SelectTrigger>
<SelectTrigger className="w-full min-w-0 gap-1.5 px-3 [&_svg]:size-4"><SelectValue /></SelectTrigger>
<SelectContent>
{IMG2IMG_ASPECT_RATIOS.map(ar => (
<SelectItem key={ar.value} value={ar.value}>{ar.label}</SelectItem>
@@ -630,7 +630,7 @@ export function ImageToImagePanel() {
<div className="min-w-0 space-y-2">
<Label></Label>
<Select value={resolution} onValueChange={setResolution}>
<SelectTrigger className="w-full min-w-0"><SelectValue /></SelectTrigger>
<SelectTrigger className="w-full min-w-0 gap-1.5 px-3 [&_svg]:size-4"><SelectValue /></SelectTrigger>
<SelectContent>
{RESOLUTION_OPTIONS.map(r => (
<SelectItem key={r.value} value={r.value}>{r.label}</SelectItem>
@@ -641,7 +641,7 @@ export function ImageToImagePanel() {
<div className="min-w-0 space-y-2">
<Label></Label>
<Select value={outputFormat} onValueChange={v => setOutputFormat(v as ImageOutputFormat)}>
<SelectTrigger className="w-full min-w-0"><SelectValue /></SelectTrigger>
<SelectTrigger className="w-full min-w-0 gap-1.5 px-3 [&_svg]:size-4"><SelectValue /></SelectTrigger>
<SelectContent>
{IMAGE_OUTPUT_FORMAT_OPTIONS.map(format => (
<SelectItem key={format.value} value={format.value}>{format.label}</SelectItem>
@@ -652,7 +652,7 @@ export function ImageToImagePanel() {
<div className="min-w-0 space-y-2">
<Label></Label>
<Select value={imageQuality} onValueChange={v => setImageQuality(v as ImageQuality)}>
<SelectTrigger className="w-full min-w-0"><SelectValue /></SelectTrigger>
<SelectTrigger className="w-full min-w-0 gap-1.5 px-3 [&_svg]:size-4"><SelectValue /></SelectTrigger>
<SelectContent>
{IMAGE_QUALITY_OPTIONS.map(option => (
<SelectItem key={option.value} value={option.value}>{option.label}</SelectItem>

View File

@@ -479,11 +479,11 @@ export function TextToImagePanel() {
</div>
{/* Image Params */}
<div className="grid grid-cols-2 gap-x-4 gap-y-3 lg:grid-cols-4">
<div className="grid grid-cols-2 gap-x-3 gap-y-3 lg:grid-cols-[minmax(7.75rem,1.2fr)_minmax(5.75rem,0.9fr)_minmax(5.75rem,0.9fr)_minmax(5.75rem,0.9fr)]">
<div className="min-w-0 space-y-2">
<Label></Label>
<Select value={aspectRatio} onValueChange={setAspectRatio}>
<SelectTrigger className="w-full min-w-0"><SelectValue /></SelectTrigger>
<SelectTrigger className="w-full min-w-0 gap-1.5 px-3 [&_svg]:size-4"><SelectValue /></SelectTrigger>
<SelectContent>
{ASPECT_RATIOS.map(ar => (
<SelectItem key={ar.value} value={ar.value}>{ar.label}</SelectItem>
@@ -494,7 +494,7 @@ export function TextToImagePanel() {
<div className="min-w-0 space-y-2">
<Label></Label>
<Select value={resolution} onValueChange={setResolution}>
<SelectTrigger className="w-full min-w-0"><SelectValue /></SelectTrigger>
<SelectTrigger className="w-full min-w-0 gap-1.5 px-3 [&_svg]:size-4"><SelectValue /></SelectTrigger>
<SelectContent>
{RESOLUTION_OPTIONS.map(r => (
<SelectItem key={r.value} value={r.value}>{r.label}</SelectItem>
@@ -505,7 +505,7 @@ export function TextToImagePanel() {
<div className="min-w-0 space-y-2">
<Label></Label>
<Select value={outputFormat} onValueChange={v => setOutputFormat(v as ImageOutputFormat)}>
<SelectTrigger className="w-full min-w-0"><SelectValue /></SelectTrigger>
<SelectTrigger className="w-full min-w-0 gap-1.5 px-3 [&_svg]:size-4"><SelectValue /></SelectTrigger>
<SelectContent>
{IMAGE_OUTPUT_FORMAT_OPTIONS.map(format => (
<SelectItem key={format.value} value={format.value}>{format.label}</SelectItem>
@@ -516,7 +516,7 @@ export function TextToImagePanel() {
<div className="min-w-0 space-y-2">
<Label></Label>
<Select value={imageQuality} onValueChange={v => setImageQuality(v as ImageQuality)}>
<SelectTrigger className="w-full min-w-0"><SelectValue /></SelectTrigger>
<SelectTrigger className="w-full min-w-0 gap-1.5 px-3 [&_svg]:size-4"><SelectValue /></SelectTrigger>
<SelectContent>
{IMAGE_QUALITY_OPTIONS.map(option => (
<SelectItem key={option.value} value={option.value}>{option.label}</SelectItem>