muken/la-huasca-ts
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: SVG icons now scale properly with CSS instead of fixed width/height

Browse Source 
- Remove hardcoded width/height attributes from SVGs
- Use CSS (width:100%;height:100%) for proper scaling
- Fixes amenity icons appearing compacted/overlapping
- viewBox maintains aspect ratio, CSS controls display size
This commit is contained in:
muken
2026-07-01 21:59:22 -05:00
parent 09bbe0a441
commit d730961c96
2 changed files with 12 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/admin/page.tsx
+9 -5
View File
@@ -1010,7 +1010,7 @@ function RoomEditor({ room, setRoom, images, onSave, onCancel }: any) {
cursor: 'pointer', fontSize: '12px', transition: 'all 150ms',
color: selectedAmenities.includes(a.id) ? C.gold : C.text
}}>
<span style={{ width: 16, height: 16 }} dangerouslySetInnerHTML={{ __html: a.icon_svg.replace(/width="24"/g, 'width="16"').replace(/height="24"/g, 'height="16"') }} />
<span style={{ width: 16, height: 16, display: 'inline-flex', alignItems: 'center', justifyContent: 'center' }} dangerouslySetInnerHTML={{ __html: a.icon_svg.replace(/width="[^"]*"/g, '').replace(/height="[^"]*"/g, '').replace(/stroke="currentColor"/g, `stroke="${C.navy}"`).replace(/<svg/, '<svg style="width:100%;height:100%"') }} />
{a.name}
</button>
))}
@@ -1078,8 +1078,12 @@ function AmenitiesSection({ onToast }: { onToast: (msg: string, type: string) =>
<div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(200px, 1fr))', gap: '12px' }}>
{amenities.sort((a, b) => a.sort_order - b.sort_order).map((a: Amenity) => (
<div key={a.id} style={{ background: '#fff', borderRadius: 12, padding: '16px', boxShadow: C.shadow, display: 'flex', flexDirection: 'column', alignItems: 'center', gap: '10px' }}>
<div style={{ width: 48, height: 48, display: 'flex', alignItems: 'center', justifyContent: 'center', color: C.navy }}
dangerouslySetInnerHTML={{ __html: a.icon_svg.replace(/stroke="currentColor"/g, `stroke="${C.navy}"`).replace(/width="24"/g, 'width="32"').replace(/height="24"/g, 'height="32"') }} />
<div style={{ width: 32, height: 32, display: 'flex', alignItems: 'center', justifyContent: 'center', color: C.navy }}
dangerouslySetInnerHTML={{ __html: a.icon_svg
.replace(/width="[^"]*"/g, '')
.replace(/height="[^"]*"/g, '')
.replace(/stroke="currentColor"/g, `stroke="${C.navy}"`)
.replace(/<svg/, '<svg style="width:100%;height:100%"') }} />
<div style={{ fontWeight: 600, color: C.navy, textAlign: 'center' }}>{a.name}</div>
<div style={{ display: 'flex', gap: '8px' }}>
<Btn size="sm" variant="secondary" onClick={() => setEditing(a)}>Edit</Btn>
@@ -1126,7 +1130,7 @@ function AmenityEditor({ amenity, setAmenity, onSave, onCancel }: any) {
style={{ padding: '8px 12px', borderRadius: 8, border: `1px solid ${C.border}`, fontSize: '13px', fontFamily: 'monospace', outline: 'none', background: '#FAFAFA', resize: 'vertical' }} />
{amenity.icon_svg && (
<div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', width: 64, height: 64, background: C.bg, borderRadius: 8, marginTop: '8px' }}
dangerouslySetInnerHTML={{ __html: amenity.icon_svg.replace(/stroke="currentColor"/g, `stroke="${C.navy}"`).replace(/width="24"/g, 'width="48"').replace(/height="24"/g, 'height="48"') }} />
dangerouslySetInnerHTML={{ __html: amenity.icon_svg.replace(/width="[^"]*"/g, '').replace(/height="[^"]*"/g, '').replace(/stroke="currentColor"/g, `stroke="${C.navy}"`).replace(/<svg/, '<svg style="width:100%;height:100%"') }} />
)}
</div>
<div style={{ display: 'flex', flexDirection: 'column', gap: '8px' }}>
@@ -1137,7 +1141,7 @@ function AmenityEditor({ amenity, setAmenity, onSave, onCancel }: any) {
style={{ padding: '6px 10px', borderRadius: 6, border: `1px solid ${C.border}`, background: '#fff', cursor: 'pointer', fontSize: '12px', display: 'flex', alignItems: 'center', gap: '4px', transition: 'all 150ms' }}
onMouseEnter={e => { e.currentTarget.style.borderColor = C.gold; e.currentTarget.style.background = C.goldLight; }}
onMouseLeave={e => { e.currentTarget.style.borderColor = C.border; e.currentTarget.style.background = '#fff'; }}>
<span style={{ width: 18, height: 18, display: 'flex', alignItems: 'center', justifyContent: 'center' }} dangerouslySetInnerHTML={{ __html: icon.svg.replace(/width="24"/g, 'width="18"').replace(/height="24"/g, 'height="18"') }} />
<span style={{ width: 18, height: 18, display: 'flex', alignItems: 'center', justifyContent: 'center' }} dangerouslySetInnerHTML={{ __html: icon.svg.replace(/width="[^"]*"/g, '').replace(/height="[^"]*"/g, '').replace(/stroke="currentColor"/g, `stroke="${C.navy}"`).replace(/<svg/, '<svg style="width:100%;height:100%"') }} />
{icon.name}
</button>
))}