🎨 a few responsiveness tweaks

webcrawls · Apr 13, 2024 · d6b6822 · d6b6822
1 parent ccecb9f
commit d6b6822
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 3 deletions.
diff --git a/src/lib/TVWrapperViewer.svelte b/src/lib/TVWrapperViewer.svelte
@@ -137,7 +137,6 @@
         border: 2px solid black;
         backdrop-filter: blur(4px);
         border-radius: 2px;
-        font-size: 20px;
 
         width: min-content;
         height: min-content;
@@ -192,6 +191,10 @@
         font-weight: normal;
     }
 
+    .text-container p {
+        font-size: clamp(14px, 3vw, 20px);
+    }
+
     .hidden {
         visibility: hidden;
     }

diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
@@ -29,8 +29,12 @@
     }
 
     const centerTv = () => {
-        let wrapper = document.querySelector(".main-wrapper")
-        scrollElementIntoView(wrapper)
+        let wrapper = document.querySelector(".main-wrapper main")
+        wrapper.scrollIntoView({
+            behavior: "auto",
+            block: "center",
+            inline: "center",
+        });
     }
 
     onMount(() => {

diff --git a/static/app.css b/static/app.css
@@ -71,6 +71,8 @@ html {
     /*width: 100%;*/
     /*scroll-snap-align: center;*/
     overflow: hidden;
+    overflow-x: scroll;
+    overscroll-behavior: none;
 
     display: flex;
     width: 100%;
@@ -352,6 +354,12 @@ main .tv-nav a:hover {
     width: 50%
 }
 
+@media screen and (max-width: 360px) {
+    .main-wrapper main {
+        transform: scale(0.9);
+    }
+}
+
 @media screen and (max-width: 440px) {
     footer .footer-container > img {
         width: 80px;