From d730961c969083713551c4a18dc7b2846bc0d161 Mon Sep 17 00:00:00 2001
From: muken <jmendoza14@pm.me>
Date: Wed, 1 Jul 2026 21:59:22 -0500
Subject: [PATCH] fix: SVG icons now scale properly with CSS instead of fixed
 width/height

- 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
---
 src/app/admin/page.tsx | 14 +++++++++-----
 src/app/rooms/page.tsx |  5 +++--
 2 files changed, 12 insertions(+), 7 deletions(-)

diff --git a/src/app/admin/page.tsx b/src/app/admin/page.tsx
index edba6b1..6ddfcb5 100644
--- a/src/app/admin/page.tsx
+++ b/src/app/admin/page.tsx
@@ -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>
               ))}
diff --git a/src/app/rooms/page.tsx b/src/app/rooms/page.tsx
index 700e0f5..267567a 100644
--- a/src/app/rooms/page.tsx
+++ b/src/app/rooms/page.tsx
@@ -497,9 +497,10 @@ export default function RoomsPage() {
                           <span
                             style={{ display: 'inline-flex', alignItems: 'center', justifyContent: 'center', width: '16px', height: '16px' }}
                             dangerouslySetInnerHTML={{ __html: amenity.icon_svg
-                              .replace(/width="[^"]*"/g, 'width="16"')
-                              .replace(/height="[^"]*"/g, 'height="16"')
+                              .replace(/width="[^"]*"/g, '')
+                              .replace(/height="[^"]*"/g, '')
                               .replace(/stroke="currentColor"/g, `stroke="${navy}"`)
+                              .replace(/<svg/, '<svg style="width:100%;height:100%"')
                             }}
                           />
                         ) : null}