🐛 Fix icon overlap and squeeze (#283 #285)

src/components/LinkItems/Item.vue

@@ -434,24 +434,4 @@ export default {
   pointer-events: none;
 }
 
-/* Modifications for more equal width on auto-layout. This is bad code. */
-.orientation-auto {
-  .collapsable.col-1 .wrap-size-medium {
-    max-width: 50%;
-  }
-  @include tablet-up {
-    .collapsable.col-2 .wrap-size-medium {
-      max-width: 25%;
-    }
-  }
-  @include tablet-up {
-    .collapsable.col-1 .wrap-size-small {
-      min-width: 50%;
-    }
-    .collapsable.col-2 .wrap-size-small {
-      min-width: 20%;
-    }
-  }
-}
-
 </style>

src/styles/color-themes.scss

@@ -406,20 +406,11 @@ html[data-theme='material'], html[data-theme='material-dark'] {
         min-height: 2rem;
       }	
     }
-    &.size-large {
-      width: 18rem;
-      min-width: 18rem;
-      max-height: 5rem;
-      margin: 0.4rem;
-      img {
-        padding: 0.2rem 0.5rem;
-      }
-    }
   }
   .tooltip.item-description-tooltip:not(.tooltip-is-small) {
     display: none !important;
   }
-  .orientation-horizontal {
+  .orientation-horizontal:not(.single-section-view) {
     display: flex;
     flex-direction: column;
     .there-are-items {
@@ -432,6 +423,11 @@ html[data-theme='material'], html[data-theme='material-dark'] {
       @include big-screen { grid-template-columns: repeat(5, 1fr); }
       @include big-screen-up { grid-template-columns: repeat(6, 1fr); }
     }
+    .there-are-items .item-wrapper .item {
+      width: auto;
+      min-width: auto;
+      max-height: auto;
+    }
   }
   a.item {
     position: relative;
@@ -480,15 +476,9 @@ html[data-theme='material'], html[data-theme='material-dark'] {
       padding-left: 0.5rem;
       min-width: 11rem;
     }
-    &.size-large {
-      &:before {
-        width: 1.5rem;
-      }
-      &:hover {
-        div:nth-child(2) {
-          text-indent: 1.5rem;
-        }
-      }
+    &.short:not(.size-large) {
+      min-height: 2rem;
+      height: auto;
     }
   }
 }