Small fixes and better mobile layout

src/components/LinkItems/Item.vue

@@ -68,8 +68,8 @@ export default {
     manageTitleEllipse() {
       const tileElem = document.getElementById(`tile-${this.getId}`);
       if (tileElem) {
-        const isOverflowing = tileElem.scrollHeight > tileElem.clientHeight
-              || tileElem.scrollWidth > tileElem.clientWidth;
+        const isOverflowing = (tileElem.scrollHeight > tileElem.clientHeight
+              || tileElem.scrollWidth > tileElem.clientWidth) && this.title.length > 12;
         if (isOverflowing) tileElem.className += ' is-overflowing';
       } // Note from present me to past me: WTF?!
     },
@@ -107,6 +107,7 @@ export default {
   border-radius: var(--curve-factor);
   box-shadow: var(--item-shadow);
   cursor: pointer;
+  text-decoration: none;
   &:hover {
     box-shadow: var(--item-hover-shadow);
     background: var(--item-background-hover);
@@ -176,7 +177,7 @@ export default {
       opacity: 0;
     }
     span.text {
-      transform: translateX(calc(120px - 100%));
+      transform: translateX(calc(100px - 100%));
     }
   }
 

src/components/LinkItems/ItemIcon.vue

@@ -54,7 +54,8 @@ export default {
     /* Checks if the icon is from a local image, remote URL, SVG or font-awesome */
     determineImageType(img) {
       let imgType = '';
-      if (this.isUrl(img)) imgType = 'url';
+      if (!img) imgType = 'none';
+      else if (this.isUrl(img)) imgType = 'url';
       else if (this.isImage(img)) imgType = 'img';
       else if (img.substr(4) === ('.svg' || '.SVG')) imgType = 'svg';
       else if (img.includes('fa-')) imgType = 'font-awesome';

src/components/Settings/SearchBar.vue

@@ -55,6 +55,8 @@ export default {
 
 <style scoped lang="scss">
 
+@import '@/styles/media-queries.scss';
+
   section {
     display: flex;
     align-items: center;
@@ -107,12 +109,19 @@ export default {
     }
   }
 
-  @media screen and (max-width: 600px) {
+  @include tablet {
+    form {
+      display: block;
+      text-align: center;
+    }
+  }
+  @include phone {
     form {
       flex: 1;
       border-radius: 0;
       text-align: center;
       padding: 0.25rem 0;
+      display: block;
     }
   }
 </style>

src/components/Settings/SettingsContainer.vue

@@ -65,6 +65,8 @@ export default {
 
 <style scoped lang="scss">
 
+@import '@/styles/media-queries.scss';
+
   section {
     display: flex;
     align-items: center;
@@ -87,9 +89,21 @@ export default {
     }
   }
 
-  @media screen and (max-width: 600px) {
+  @include tablet {
+    section {
+      display: block;
+      margin: 0 auto;
+      background: none;
+      .options-container {
+          justify-content: center;
+      }
+    }
+  }
+
+  @include phone {
     .options-container {
       display: none;
     }
   }
+
 </style>