fix: avoid line-breaks before flag and improve responsive lists

Closes #143
AOEpeople · Mar 12, 2024 · b6b4709 · b6b4709
1 parent 858e10b
commit b6b4709
Show file tree

Hide file tree

Showing 5 changed files with 9 additions and 11 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/src/components/ItemList/ItemList.module.css b/src/components/ItemList/ItemList.module.css
@@ -11,6 +11,7 @@
 }
 
 .flag {
+  display: inline;
   flex: 0 0 auto;
   align-self: baseline;
   margin-left: 8px;

diff --git a/src/components/ItemList/ItemList.tsx b/src/components/ItemList/ItemList.tsx
@@ -38,7 +38,7 @@ export function ItemList({
             })}
             href={`/${item.quadrant}/${item.id}`}
           >
-            {item.title}
+            <span className={styles.title}>{item.title}</span>
             <FlagBadge
               className={styles.flag}
               flag={item.flag}

diff --git a/src/components/QuadrantList/QuadrantList.module.css b/src/components/QuadrantList/QuadrantList.module.css
@@ -31,8 +31,8 @@
 .link {
 }
 
-@media (min-width: 1024px) {
-  .quadrant {
+@media (min-width: 1220px) {
+  .quadrants {
     --cols: 2;
   }
 }
diff --git a/src/components/RingList/RingList.module.css b/src/components/RingList/RingList.module.css
@@ -19,23 +19,20 @@
   margin-bottom: 20px;
 }
 
-.list {
-}
-
 @media (min-width: 480px) {
-  .ring {
+  .rings {
     --cols: 2;
   }
 }
 
 @media (min-width: 768px) {
-  .isSmall .ring {
+  .rings.isSmall {
     --cols: 4;
   }
 }
 
 @media (min-width: 1024px) {
-  .ring {
+  .rings {
     --cols: 4;
   }
 }