valknar/kit-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: stack units input row on mobile for better usability

Browse Source 
Value input now takes full width on its own row; unit selects and
swap button sit on a separate row below, each taking equal flex space.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Sebastian Krüger
2026-03-01 14:41:40 +01:00
parent c545211cf7
commit 25067bca30
1 changed files with 33 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

63
components/units/MainConverter.tsx
View File

@@ -188,7 +188,7 @@ export default function MainConverter() {
</span> </span>
{/* Input row */} {/* Input row */}
<div className="flex items-center gap-2"> <div className="flex flex-col gap-2">
{/* Value input */} {/* Value input */}
<input <input
type="text" type="text"
@@ -196,39 +196,42 @@ export default function MainConverter() {
value={inputValue} value={inputValue}
onChange={(e) => setInputValue(e.target.value)} onChange={(e) => setInputValue(e.target.value)}
placeholder="0" placeholder="0"
className="flex-1 min-w-0 bg-transparent border border-border/40 rounded-lg px-3 py-2 text-sm font-mono outline-none focus:border-primary/50 transition-colors placeholder:text-muted-foreground/30 tabular-nums" className="w-full bg-transparent border border-border/40 rounded-lg px-3 py-2.5 text-base font-mono outline-none focus:border-primary/50 transition-colors placeholder:text-muted-foreground/30 tabular-nums"
/> />
{/* From unit */} {/* Unit selectors + swap */}
<select <div className="flex items-center gap-2">
value={selectedUnit} {/* From unit */}
onChange={(e) => setSelectedUnit(e.target.value)} <select
className="w-28 shrink-0 bg-transparent border border-border/40 rounded-lg px-2.5 py-2 text-xs font-mono outline-none focus:border-primary/50 transition-colors text-foreground/80 cursor-pointer" value={selectedUnit}
> onChange={(e) => setSelectedUnit(e.target.value)}
{units.map((unit) => ( className="flex-1 min-w-0 bg-transparent border border-border/40 rounded-lg px-2.5 py-2 text-xs font-mono outline-none focus:border-primary/50 transition-colors text-foreground/80 cursor-pointer"
<option key={unit} value={unit}>{unit}</option> >
))} {units.map((unit) => (
</select> <option key={unit} value={unit}>{unit}</option>
))}
</select>
{/* Swap */} {/* Swap */}
<button <button
onClick={handleSwapUnits} onClick={handleSwapUnits}
title="Swap units" title="Swap units"
className="shrink-0 w-8 h-8 flex items-center justify-center glass rounded-lg border border-border/30 text-muted-foreground hover:text-primary hover:border-primary/30 hover:bg-primary/10 transition-all" className="shrink-0 w-8 h-8 flex items-center justify-center glass rounded-lg border border-border/30 text-muted-foreground hover:text-primary hover:border-primary/30 hover:bg-primary/10 transition-all"
> >
<ArrowLeftRight className="w-3.5 h-3.5" /> <ArrowLeftRight className="w-3.5 h-3.5" />
</button> </button>
{/* To unit */} {/* To unit */}
<select <select
value={targetUnit} value={targetUnit}
onChange={(e) => setTargetUnit(e.target.value)} onChange={(e) => setTargetUnit(e.target.value)}
className="w-28 shrink-0 bg-transparent border border-border/40 rounded-lg px-2.5 py-2 text-xs font-mono outline-none focus:border-primary/50 transition-colors text-foreground/80 cursor-pointer" className="flex-1 min-w-0 bg-transparent border border-border/40 rounded-lg px-2.5 py-2 text-xs font-mono outline-none focus:border-primary/50 transition-colors text-foreground/80 cursor-pointer"
> >
{units.map((unit) => ( {units.map((unit) => (
<option key={unit} value={unit}>{unit}</option> <option key={unit} value={unit}>{unit}</option>
))} ))}
</select> </select>
</div>
</div> </div>
{/* Result display */} {/* Result display */}