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

Closes AOEpeople#143
medic · 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;
  }
 }