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

11
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,14 +196,16 @@ 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"
/> />
{/* Unit selectors + swap */}
<div className="flex items-center gap-2">
{/* From unit */} {/* From unit */}
<select <select
value={selectedUnit} value={selectedUnit}
onChange={(e) => setSelectedUnit(e.target.value)} 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" 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>
@@ -223,13 +225,14 @@ export default function MainConverter() {
<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 */}
{resultValue !== null && ( {resultValue !== null && (