mobile ui enhancements

static/css/style.css

@@ -263,7 +263,6 @@ html {
     flex: 1 1 auto;
     padding: .5rem .5rem 2rem .5rem;
     margin: .25rem;
-    border: 1px solid #00000000;
     border-radius: 12px;
     height: 10rem;
     max-width: 20rem;
@@ -271,7 +270,7 @@ html {
 }
 
 .image_selected {
-    border-color: var(--blue);
+    border: 1px solid var(--border);
 }
 
 .image>a {
@@ -1511,20 +1510,6 @@ body, h1, p, a, input, button {
     }
 }
 
-/* 
-.material-icons-round {
-    font-family: 'Material Icons Round';
-    font-weight: normal;
-    font-style: normal;
-    line-height: 1;
-    letter-spacing: normal;
-    text-transform: none;
-    display: inline-block;
-    white-space: nowrap;
-    word-wrap: normal;
-    direction: ltr;
-} */
-
 @media only screen and (max-width: 1220px) {
 
     .snip {
@@ -1697,6 +1682,10 @@ body, h1, p, a, input, button {
         margin-right: 1.2% !important;
     }
 
+    .image {
+        max-width: 100%;
+    }
+
     .logomobile {
         position: relative;
         float: none;
@@ -1705,21 +1694,21 @@ body, h1, p, a, input, button {
         margin-left: auto;
         margin-right: auto;
         padding: 10px;
-        font-size: 26px;
         display: block;
         margin-top: 0px;
         top: -5px; /* how ? why ? I dont even wanna know */
         left: 0px;
     }
 
+    .logo-container svg {
+        width: 100px;
+        height: 35px;
+    }
+
     .mobile-none {
         display: none;
     }
 
-    /* .search-menu {
-        display: none;
-    } */
-
     .sub-search-button-wrapper {
         margin: 0;
         padding: 0;
@@ -1738,8 +1727,6 @@ body, h1, p, a, input, button {
     }
 
     .sub-search-button-wrapper button {
-        margin-right: 4px;
-        margin-left: 4px;
         padding: 0;
         display: flex;
         flex-direction: column;
@@ -1866,12 +1853,55 @@ body, h1, p, a, input, button {
 
 }
 
+@media only screen and (max-width: 470px) {
+    .sub-search-button-wrapper {
+        display: flex;
+        flex-direction: row;
+        justify-content: flex-start;
+        overflow-x: auto;
+        white-space: nowrap;
+        padding-left: 10px;
+        padding-right: 10px;
+        position: relative;
+        scroll-behavior: smooth;
+        scrollbar-width: none; /* Hide scrollbar for Firefox */
+    }
+
+    /* Hide scrollbar for Webkit-based browsers (e.g., Chrome, Safari) */
+    .sub-search-button-wrapper::-webkit-scrollbar {
+        display: none;
+    }
+
+    /* Gradient as a fixed visual indicator */
+    .sub-search-button-wrapper::after {
+        content: ''; /* Adds a gradient or fade effect as a scroll indicator */
+        position: fixed; /* Ensure it doesn't move with scrolling */
+        top: 90px;
+        right: 0;
+        height: 40px;
+        width: 20px;
+        background: linear-gradient(to left, var(--html-bg), rgba(255, 255, 255, 0)); /* Adjust colors */
+        pointer-events: none; /* Prevent interaction */
+        z-index: 1; /* Ensure it is above the scrollable content */
+    }
+
+    /* Hide gradient when fully scrolled */
+    .sub-search-button-wrapper:has(.search-container-results-btn:last-child:in-view)::after {
+        display: none;
+    }
+}
+
  /* This is really bad */
 @media only screen and (max-width: 400px) {
 
     .icon-button {
         padding: 5%
     }
+
+    .results_settings {
+        display: flex;         /* Enable flexbox */
+        flex-wrap: wrap;       /* Allow elements to wrap onto new lines when necessary */
+    }
 }
 
 /* Ensuring dark theme compliance */