Donat/SerpentRace
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style(deck-creator): pakli név mező szélességének optimalizálása

Browse Source 
- Pakli név mező mostantól csak 2/3 szélességű
- Jobb vizuális egyensúly a form elemek között
- Reszponzív elrendezés megtartva
This commit is contained in:
GitG0r0
2025-10-22 20:01:54 +02:00
parent 46ad6caefd
commit 83efb91f52
1 changed files with 18 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files
SerpentRace_Frontend/src/components/DeckCreator/DeckHeader.jsx
+18 -12
View File
@@ -75,18 +75,24 @@ export default function DeckHeader({ deck, onUpdate, onSave, onBack }) {
{/* Main Content Row */} {/* Main Content Row */}
<div className="space-y-4"> <div className="space-y-4">
{/* Deck Name */} {/* Two Column Layout */}
<div> <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
<label className="block text-[color:var(--color-text-muted)] text-sm font-medium mb-2"> {/* Deck Name - Takes up 2 columns */}
📦 Pakli neve <div className="md:col-span-2">
</label> <label className="block text-[color:var(--color-text-muted)] text-sm font-medium mb-2">
<input 📦 Pakli neve
type="text" </label>
value={deck.name} <input
onChange={(e) => handleInputChange('name', e.target.value)} type="text"
className="w-full px-4 py-2 rounded-xl bg-[color:var(--color-background)] border border-[color:var(--color-surface-selected)] text-[color:var(--color-text)] focus:ring-2 focus:ring-[color:var(--color-success)] focus:border-transparent outline-none transition-all duration-200" value={deck.name}
placeholder="Add meg a pakli nevét..." onChange={(e) => handleInputChange('name', e.target.value)}
/> className="w-full px-4 py-2 rounded-xl bg-[color:var(--color-background)] border border-[color:var(--color-surface-selected)] text-[color:var(--color-text)] focus:ring-2 focus:ring-[color:var(--color-success)] focus:border-transparent outline-none transition-all duration-200"
placeholder="Add meg a pakli nevét..."
/>
</div>
{/* Empty space for visual balance */}
<div className="hidden md:block"></div>
</div> </div>
{/* Type, Privacy and Description Row */} {/* Type, Privacy and Description Row */}