UX: allow tooltips to appear, fix mobile layout for minimal, blog options (#43)

Author: awesomerobot

common/common.scss

@@ -100,7 +100,7 @@
   .topic-list-item {
     display: grid;
     position: relative;
-    overflow: hidden;
+    min-width: 0;
     height: 250px;
 
     grid-template-areas:
@@ -218,13 +218,13 @@
   .topic-list-item {
     display: grid;
     position: relative;
-    overflow: hidden;
+    min-width: 0;
     height: 250px;
     grid-template-areas:
       " image image image"
       " title likes posts";
     grid-template-rows: 1fr 45px;
-    grid-template-columns: 70% 15% 15%;
+    grid-template-columns: 70% minmax(0, 15%) minmax(0, 15%);
     border-bottom: none;
     &.visited {
       background-color: transparent !important;
@@ -263,6 +263,7 @@
     justify-content: flex-end;
     align-items: center;
     color: var(--primary-low-mid);
+    overflow: hidden;
     .number {
       font-size: 13px;
       font-weight: bold;
@@ -276,7 +277,8 @@
   .posts-map {
     padding: 0;
     grid-area: posts;
-    width: auto;
+    overflow: hidden;
+    width: auto !important; // overrides very specific core style
     .badge-posts {
       padding: 0;
       height: 100%;
@@ -322,6 +324,10 @@
       }
     }
   }
+
+  .d-tooltip-content {
+    white-space: normal;
+  }
 }
 
 .topic-thumbnails-blog-style-grid {

mobile/mobile.scss

@@ -35,18 +35,10 @@
     grid-column-gap: 10px;
     grid-row-gap: 5px;
     .topic-list-item {
-      grid-template-columns: 1fr 45px;
-      grid-template-rows: 1fr 30px;
-      grid-template-areas:
-        "image image"
-        "title posts";
       height: 150px;
+      grid-template-areas: "image image image" "title title title";
       .topic-thumbnail-likes {
-        grid-area: posts;
-        font-size: $font-down-3;
-        .d-icon {
-          font-size: 12px;
-        }
+        display: none;
       }
       .main-link {
         padding: 0 !important;
@@ -59,25 +51,13 @@
       }
       .posts-map {
         display: none;
-        margin-top: 1px;
-        span.number {
-          color: var(--primary-low-mid);
-          display: flex;
-          font-size: $font-down-4;
-          &:before {
-            content: "";
-            background-color: var(--primary-low-mid);
-            -webkit-mask-repeat: no-repeat;
-            mask-repeat: no-repeat;
-            mask-image: url('data:image/svg+xml; utf8, <svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="comment" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="svg-inline--fa fa-comment fa-w-16 fa-2x"><path fill="gray" d="M256 32C114.6 32 0 125.1 0 240c0 49.6 21.4 95 57 130.7C44.5 421.1 2.7 466 2.2 466.5c-2.2 2.3-2.8 5.7-1.5 8.7S4.8 480 8 480c66.3 0 116-31.8 140.6-51.4 32.7 12.3 69 19.4 107.4 19.4 141.4 0 256-93.1 256-208S397.4 32 256 32z" class=""></path></svg>');
-            -webkit-mask-image: url('data:image/svg+xml; utf8, <svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="comment" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="svg-inline--fa fa-comment fa-w-16 fa-2x"><path fill="gray" d="M256 32C114.6 32 0 125.1 0 240c0 49.6 21.4 95 57 130.7C44.5 421.1 2.7 466 2.2 466.5c-2.2 2.3-2.8 5.7-1.5 8.7S4.8 480 8 480c66.3 0 116-31.8 140.6-51.4 32.7 12.3 69 19.4 107.4 19.4 141.4 0 256-93.1 256-208S397.4 32 256 32z" class=""></path></svg>');
-            display: block;
-            height: 12px;
-            width: 12px;
-            margin-right: 3px;
-          }
-        }
       }
     }
   }
 }
+
+.topic-thumbnails-blog-style-grid {
+  .topic-list-data {
+    max-width: unset;
+  }
+}