From c98824c8d7e52be35b417759fa28748fd9c64f82 Mon Sep 17 00:00:00 2001
From: muken <jmendoza14@pm.me>
Date: Tue, 30 Jun 2026 23:36:30 -0500
Subject: [PATCH] fix: improve amenity icon display on room cards

- Icons now render with proper size (14px) inside pill badges
- Show amenity name next to icon for clarity
- Use regex for robust width/height replacement
- Compact layout with smaller gaps and font sizes
- Better text wrapping with whiteSpace: nowrap
---
 src/app/rooms/page.tsx | 20 +++++++++++++-------
 1 file changed, 13 insertions(+), 7 deletions(-)

diff --git a/src/app/rooms/page.tsx b/src/app/rooms/page.tsx
index d88845a..907bf75 100644
--- a/src/app/rooms/page.tsx
+++ b/src/app/rooms/page.tsx
@@ -433,26 +433,32 @@ export default function RoomsPage() {
                 
                 {/* ─── Amenity Icons ─── */}
                 {room.amenities && room.amenities.length > 0 && (
-                  <div style={{ display: 'flex', flexWrap: 'wrap', gap: '0.5rem', marginTop: '0.75rem' }}>
+                  <div style={{ display: 'flex', flexWrap: 'wrap', gap: '0.4rem', marginTop: '0.75rem' }}>
                     {room.amenities.slice(0, 6).map((amenity) => (
                       <div
                         key={amenity.id}
                         title={amenity.name}
                         style={{
-                          display: 'flex',
+                          display: 'inline-flex',
                           alignItems: 'center',
                           gap: '0.25rem',
-                          padding: '0.35rem 0.6rem',
+                          padding: '0.3rem 0.5rem',
                           background: 'rgba(1,13,30,0.06)',
                           borderRadius: '999px',
-                          fontSize: '12px',
+                          fontSize: '11px',
                           color: navy,
+                          whiteSpace: 'nowrap',
                         }}
-                        dangerouslySetInnerHTML={{ __html: amenity.icon_svg.replace('width="24"', 'width="14"').replace('height="24"', 'height="14"') }}
-                      />
+                      >
+                        <span
+                          style={{ display: 'inline-flex', alignItems: 'center', width: '14px', height: '14px' }}
+                          dangerouslySetInnerHTML={{ __html: amenity.icon_svg.replace(/width="[^"]*"/, 'width="14"').replace(/height="[^"]*"/, 'height="14"') }}
+                        />
+                        <span>{amenity.name}</span>
+                      </div>
                     ))}
                     {room.amenities.length > 6 && (
-                      <span style={{ fontSize: '11px', color: '#777', alignSelf: 'center' }}>+{room.amenities.length - 6} more</span>
+                      <span style={{ fontSize: '10px', color: '#777', alignSelf: 'center', padding: '0 0.5rem' }}>+{room.amenities.length - 6}</span>
                     )}
                   </div>
                 )}