fix: Improve Library Item responsive layout and clean up dead CSS

Author: julioest

static/css/v3/library-item.css

@@ -26,26 +26,24 @@
 
 .library-item--list {
   display: grid;
-  grid-template-columns: 205px 1fr 220px 220px auto;
+  grid-template-columns: 2fr 3fr 2fr 2fr auto;
   max-width: 1408px;
   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);
   border-bottom: 1px solid var(--color-stroke-weak);
 }
 
 .library-item--list .library-item__header {
   display: contents;
 }
 
-.library-item--list .library-item__description {
-  overflow: hidden;
-}
-
 .library-item--list .library-item__tags {
   display: flex;
+  flex-wrap: wrap;
   align-items: center;
   gap: var(--space-s);
 }
@@ -64,6 +62,7 @@
 
 .library-item .version-tag {
   border-radius: var(--border-radius-xxl);
+  cursor: pointer;
 }
 
 .library-item .version-tag--default:hover {
@@ -146,48 +145,60 @@ a.library-item__name:hover {
   color: var(--color-text-secondary);
 }
 
-.library-item__contributor-info {
-  display: flex;
-  flex-direction: column;
-  gap: var(--space-xs);
-}
-
-.library-item__contributor-name {
-  font-size: var(--font-size-xs);
-  font-weight: var(--font-weight-medium);
-  line-height: var(--line-height-default);
-  color: var(--color-text-primary);
-}
-
-.library-item__contributor-role {
-  display: inline-flex;
-  align-items: center;
-  gap: var(--space-s);
-  font-size: var(--font-size-xs);
-  font-weight: var(--font-weight-regular);
-  line-height: var(--line-height-default);
-  color: var(--color-text-secondary);
-}
 
-.library-item__contributor-badge {
-  flex-shrink: 0;
-}
+/* ==========================================================================
+   Tablet
+   ========================================================================== */
 
-.library-item__contributor-badge img {
-  width: var(--space-large);
-  height: var(--space-large);
+@media (max-width: 1024px) {
+  .library-item--list {
+    grid-template-columns: 2fr 3fr 2fr 2fr auto;
+    column-gap: var(--space-large);
+  }
 }
 
 /* ==========================================================================
    Mobile
    ========================================================================== */
 
 @media (max-width: 767px) {
+  .library-item-list {
+    gap: var(--space-large);
+  }
+
   .library-item--list {
-    grid-template-columns: 1fr;
+    display: flex;
+    flex-direction: column;
+    border-bottom: none;
+    border-radius: var(--border-radius-xl);
+    border: 1px solid var(--color-stroke-weak);
+    background: var(--color-surface-weak);
+  }
+
+  .library-item--list .library-item__header {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-default);
+    padding: var(--space-large);
   }
 
   .library-item--list .library-item__tags {
+    display: flex;
     flex-wrap: wrap;
+    gap: var(--space-s);
+    padding: 0 var(--space-large) var(--space-large);
+  }
+
+  .library-item--list .library-item__actions {
+    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;
+    padding: var(--space-large);
   }
 }