UX: Various fixes for small screens (#7)

discourse · Jan 23, 2022 · c769ac0 · c769ac0
1 parent d272196
commit c769ac0
Showing 1 changed file with 8 additions and 4 deletions.
diff --git a/scss/card-filters.scss b/scss/card-filters.scss
@@ -1,6 +1,7 @@
 .docs-cards-filter {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(20%, 1fr));
+  grid-auto-rows: 1fr;
   grid-column-gap: 1em;
   grid-row-gap: 1em;
   justify-items: center;
@@ -9,7 +10,7 @@
   overflow: hidden;
   transition: all 0.3s ease;
   opacity: 0;
-  @media screen and (max-width: 600px) {
+  @media screen and (max-width: 700px) {
     grid-template-columns: repeat(auto-fit, minmax(45%, 1fr));
   }
 }
@@ -80,7 +81,8 @@
   &:visited {
     color: var(--primary);
   }
-  width: calc(100% - 2em - 2px);
+  box-sizing: border-box;
+  width: 100%;
   border: 1px solid var(--primary-low-mid);
   padding: 1em;
   border-radius: 0.25em;
@@ -97,8 +99,9 @@
 
   &-header {
     display: flex;
-    flex-direction: row;
-    align-items: center;
+    align-items: baseline;
+    word-break: break-word;
+
     .d-icon.card-tag-icon {
       font-size: 0.75em;
       color: var(--primary-low-mid);
@@ -133,6 +136,7 @@
 }
 
 .docs-card-box-header-badge-category-bg {
+  flex-shrink: 0;
   width: 10px;
   height: 10px;
   margin-right: 0.25em;