From b6b4709ed5724bf10bbcecf2686f6e68eb4ee9b2 Mon Sep 17 00:00:00 2001
From: Mathias Schopmans <mathias.schopmans@aoe.com>
Date: Tue, 12 Mar 2024 16:51:53 +0100
Subject: [PATCH] fix: avoid line-breaks before flag and improve responsive
 lists

Closes #143
---
 package-lock.json                                   | 4 ++--
 src/components/ItemList/ItemList.module.css         | 1 +
 src/components/ItemList/ItemList.tsx                | 2 +-
 src/components/QuadrantList/QuadrantList.module.css | 4 ++--
 src/components/RingList/RingList.module.css         | 9 +++------
 5 files changed, 9 insertions(+), 11 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 6de52b9..1f64c4d 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "aoe_technology_radar",
-  "version": "4.0.0",
+  "version": "4.0.1",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "aoe_technology_radar",
-      "version": "4.0.0",
+      "version": "4.0.1",
       "hasInstallScript": true,
       "bin": {
         "techradar": "bin/techradar.js"
diff --git a/src/components/ItemList/ItemList.module.css b/src/components/ItemList/ItemList.module.css
index 185c6ea..5a78e54 100644
--- 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
index 5c3cc0e..9efb8d2 100644
--- 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
index 3d6b42c..9a86d8d 100644
--- 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
index 9d0e897..a79bd7a 100644
--- 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;
   }
 }