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

Closes #143

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"

src/components/ItemList/ItemList.module.css

@@ -11,6 +11,7 @@
 }
 
 .flag {
+  display: inline;
   flex: 0 0 auto;
   align-self: baseline;
   margin-left: 8px;

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}

src/components/QuadrantList/QuadrantList.module.css

@@ -31,8 +31,8 @@
 .link {
 }
 
-@media (min-width: 1024px) {
+@media (min-width: 1220px) {
-  .quadrant {
+  .quadrants {
     --cols: 2;
   }
 }

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;
   }
 }