fix: Library Item responsive layout #2204

Subgrid for consistent column alignment, card
layout for mobile list variant, dual version tag
for desktop/mobile, and design token for icon size.

Author: julioest

static/css/v3/library-item.css

@@ -6,8 +6,10 @@
   list-style: none;
   margin: 0;
   padding: 0;
-  display: flex;
-  flex-direction: column;
+  display: grid;
+  grid-template-columns: 160px 3fr minmax(180px, 2fr) minmax(180px, 2fr) auto;
+  column-gap: var(--space-xl);
+  max-width: 1408px;
   width: 100%;
 }
 
@@ -26,11 +28,10 @@
 
 .library-item--list {
   display: grid;
-  grid-template-columns: 2fr 3fr 2fr 2fr auto;
-  max-width: 1408px;
+  grid-column: 1 / -1;
+  grid-template-columns: subgrid;
   align-items: flex-start;
   row-gap: var(--space-large);
-  column-gap: var(--space-xl);
   padding: var(--space-large);
   padding-top: var(--space-default);
   background: var(--color-surface-weak);
@@ -57,16 +58,18 @@
 .library-item--list .library-item__actions {
   display: flex;
   align-items: center;
+  justify-content: space-between;
   gap: var(--space-xl);
+  min-width: 120px;
 }
 
-.library-item .version-tag {
-  border-radius: var(--border-radius-xxl);
-  cursor: pointer;
+/* Show desktop version tag in actions, hide mobile one in tags */
+.library-item__cpp-version {
+  display: none;
 }
 
-.library-item .version-tag--default:hover {
-  background: var(--color-tag-fill-hover);
+.library-item__cpp-version--desktop {
+  display: inline-flex;
 }
 
 .library-item .btn-icon-library {
@@ -75,13 +78,18 @@
   background: none;
 }
 
+.library-item .btn-icon-library .btn-icon svg {
+  width: var(--space-xl);
+  height: var(--space-xl);
+}
+
 /* ==========================================================================
-   Card variant (vertical stack)
+   Card layout — used by card variant and mobile list variant
    ========================================================================== */
 
 .library-item--card {
-  display: flex;
-  flex-direction: column;
+  display: grid;
+  grid-template-columns: 1fr auto;
   max-width: 320px;
   width: 100%;
   border-radius: var(--border-radius-xl);
@@ -90,35 +98,54 @@
 }
 
 .library-item--card .library-item__header {
+  grid-column: 1;
+  grid-row: 1;
   display: flex;
   flex-direction: column;
   gap: var(--space-default);
   padding: var(--space-large);
+  padding-bottom: 0;
 }
 
-.library-item--card .library-item__tags {
+.library-item--card .library-item__actions {
+  grid-column: 2;
+  grid-row: 1;
   display: flex;
-  flex-wrap: wrap;
-  gap: var(--space-s);
-  padding: 0 var(--space-large) var(--space-large);
+  align-items: flex-start;
+  justify-content: center;
+  padding: var(--space-large);
+  padding-bottom: 0;
 }
 
-.library-item--card .library-item__actions {
+.library-item--card .library-item__cpp-version--desktop {
+  display: none;
+}
+
+.library-item--card .library-item__cpp-version {
+  display: inline-flex;
+}
+
+.library-item--card .library-item__tags {
+  grid-column: 1 / -1;
+  grid-row: 2;
   display: flex;
+  flex-wrap: wrap;
   align-items: center;
-  gap: var(--space-default);
-  padding: 0 var(--space-large) var(--space-large);
+  gap: var(--space-s);
+  padding: var(--space-large);
 }
 
 .library-item--card .library-item__contributor {
+  grid-column: 1 / -1;
+  grid-row: 3;
   display: flex;
   align-items: center;
   gap: var(--space-default);
   padding: var(--space-large);
-  border-top: 1px solid var(--color-stroke-weak);
   margin-top: auto;
 }
 
+
 /* ==========================================================================
    Shared element styles
    ========================================================================== */
@@ -151,9 +178,9 @@ a.library-item__name:hover {
    ========================================================================== */
 
 @media (max-width: 1024px) {
-  .library-item--list {
-    grid-template-columns: 2fr 3fr 2fr 2fr auto;
-    column-gap: var(--space-large);
+  .library-item-list {
+    grid-template-columns: 120px 2fr minmax(100px, 1fr) minmax(140px, 1fr) auto;
+    column-gap: var(--space-default);
   }
 }
 
@@ -163,42 +190,79 @@ a.library-item__name:hover {
 
 @media (max-width: 767px) {
   .library-item-list {
-    gap: var(--space-large);
+    display: flex;
+    flex-direction: column;
   }
 
   .library-item--list {
-    display: flex;
-    flex-direction: column;
+    display: grid;
+    grid-template-columns: 1fr auto;
+    border-bottom: 1px solid var(--color-stroke-weak);
+    border-radius: 0;
+    background: var(--color-surface-weak);
+    padding: 0;
+  }
+
+  .library-item--list:first-child {
+    border-radius: var(--border-radius-xl) var(--border-radius-xl) 0 0;
+  }
+
+  .library-item--list:last-child {
+    border-radius: 0 0 var(--border-radius-xl) var(--border-radius-xl);
     border-bottom: none;
+  }
+
+  .library-item--list:only-child {
     border-radius: var(--border-radius-xl);
-    border: 1px solid var(--color-stroke-weak);
-    background: var(--color-surface-weak);
   }
 
   .library-item--list .library-item__header {
+    grid-column: 1;
+    grid-row: 1;
     display: flex;
     flex-direction: column;
     gap: var(--space-default);
     padding: var(--space-large);
+    padding-bottom: 0;
+  }
+
+  .library-item--list .library-item__actions {
+    grid-column: 2;
+    grid-row: 1;
+    display: flex;
+    align-items: flex-start;
+    justify-content: flex-end;
+    min-width: unset;
+    padding: var(--space-large);
+    padding-bottom: 0;
+  }
+
+  .library-item--list .library-item__cpp-version--desktop {
+    display: none;
+  }
+
+  .library-item--list .library-item__cpp-version {
+    display: inline-flex;
   }
 
   .library-item--list .library-item__tags {
+    grid-column: 1 / -1;
+    grid-row: 2;
     display: flex;
     flex-wrap: wrap;
+    align-items: center;
     gap: var(--space-s);
-    padding: 0 var(--space-large) var(--space-large);
+    padding: var(--space-large);
   }
 
-  .library-item--list .library-item__actions {
+  .library-item--list .library-item__contributor {
+    grid-column: 1 / -1;
+    grid-row: 3;
     display: flex;
     align-items: center;
     gap: var(--space-default);
-    padding: 0 var(--space-large) var(--space-large);
-  }
-
-  .library-item--list .library-item__contributor {
-    border-top: 1px solid var(--color-stroke-weak);
-    margin-top: auto;
+    border-top: none;
     padding: var(--space-large);
+    margin-top: auto;
   }
 }

templates/v3/includes/_library_item.html

@@ -31,16 +31,17 @@
 
   <div class="library-item__tags">
     {% for cat in categories %}
-      {% include "v3/includes/_category_tag.html" with tag_label=cat.label url=cat.url variant=cat.variant size="tight" %}
+      {% include "v3/includes/_category_tag.html" with tag_label=cat.label url=cat.url variant=cat.variant %}
     {% endfor %}
+    <span class="version-tag version-tag--default library-item__cpp-version">{{ cpp_version }}</span>
   </div>
 
   <div class="library-item__contributor">
     {% include "v3/includes/_user_profile.html" with author=author %}
   </div>
 
   <div class="library-item__actions">
-    <span class="version-tag version-tag--default">{{ cpp_version }}</span>
+    <span class="version-tag version-tag--default library-item__cpp-version--desktop">{{ cpp_version }}</span>
     {% include "v3/includes/_button.html" with url=doc_url label="" icon_name="documentation" icon_size=16 style="icon-library" aria_label="View documentation for "|add:library_name %}
   </div>