Profile redesign: Fields iteration (#37682)

app/javascript/mastodon/components/mini_card/styles.module.css

@@ -1,52 +1,49 @@
-.wrapper {
-  display: flex;
-  flex-wrap: nowrap;
-  justify-content: flex-start;
-  gap: 4px;
-}
-
 .list {
   display: flex;
   gap: 4px;
-  overflow: hidden;
-  position: relative;
 }
 
-.card,
-.more {
+.card {
   border: 1px solid var(--color-border-primary);
   padding: 8px;
   border-radius: 8px;
   flex-shrink: 0;
-}
-
-.more {
+  display: grid;
+  grid-template-rows: repeat(2, 1fr);
+  column-gap: 8px;
+  font-size: 13px;
+  line-height: 1rem;
   color: var(--color-text-secondary);
-  font-weight: 600;
-  appearance: none;
-  background: none;
-  aspect-ratio: 1;
-  height: 100%;
-  transition: all 300ms linear;
 }
 
-.more:hover {
-  background-color: var(--color-bg-brand-softer);
-  color: var(--color-text-primary);
+.cardWithIcon {
+  grid-template-columns: 16px 1fr;
 }
 
-.hidden {
-  display: none;
-}
-
-.label {
-  color: var(--color-text-secondary);
-  margin-bottom: 2px;
+.icon {
+  grid-row: span 2;
+  grid-column: 1;
+  width: 100%;
+  height: auto;
+  align-self: center;
+  fill: currentColor;
 }
 
 .value {
   color: var(--color-text-primary);
-  font-weight: 600;
+  font-weight: 500;
+
+  a {
+    color: var(--color-text-brand);
+    text-decoration: none;
+    transition: color 0.2s ease-in-out;
+    outline: none;
+
+    &:hover,
+    &:focus {
+      color: var(--color-text-brand-soft);
+    }
+  }
 }
 
 .label,
@@ -54,4 +51,8 @@
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
+
+  .cardWithIcon & {
+    grid-column: 2;
+  }
 }