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>
{/* Input row */}
<div className="flex items-center gap-2">
<div className="flex flex-col gap-2">
{/* Value input */}
<input
type="text"
@@ -196,39 +196,42 @@ export default function MainConverter() {
value={inputValue}
onChange={(e) => setInputValue(e.target.value)}
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 */}
<select
value={selectedUnit}
onChange={(e) => setSelectedUnit(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"
>
{units.map((unit) => (
<option key={unit} value={unit}>{unit}</option>
))}
</select>
{/* Unit selectors + swap */}
<div className="flex items-center gap-2">
{/* From unit */}
<select
value={selectedUnit}
onChange={(e) => setSelectedUnit(e.target.value)}
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) => (
<option key={unit} value={unit}>{unit}</option>
))}
</select>
{/* Swap */}
<button
onClick={handleSwapUnits}
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"
>
<ArrowLeftRight className="w-3.5 h-3.5" />
</button>
{/* Swap */}
<button
onClick={handleSwapUnits}
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"
>
<ArrowLeftRight className="w-3.5 h-3.5" />
</button>
{/* To unit */}
<select
value={targetUnit}
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"
>
{units.map((unit) => (
<option key={unit} value={unit}>{unit}</option>
))}
</select>
{/* To unit */}
<select
value={targetUnit}
onChange={(e) => setTargetUnit(e.target.value)}
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) => (
<option key={unit} value={unit}>{unit}</option>
))}
</select>
</div>
</div>
{/* Result display */}