fix: force mobile viewport by preventing horizontal overflow

- Remove content-visibility from Giscus which could affect layout calculations
- Add overflow-x: hidden to html and body to strictly contain the viewport width

Author: Clickin

20260223_125912 pickpick.png

@@ -255,12 +255,7 @@ import { giscus } from "../site.config";
   </script>
   <style>
     .giscus {
-      content-visibility: auto;
-      contain-intrinsic-size: 100% 400px;
-    }
-
-    .giscus.giscus-loaded {
-      contain-intrinsic-size: auto;
+      min-height: 400px;
     }
 
     .giscus .giscus-frame {

src/components/Giscus.astro

@@ -39,11 +39,13 @@
 @layer base {
   html {
     scroll-behavior: smooth;
+    overflow-x: hidden;
   }
 
   body {
     @apply bg-[var(--color-bg)] text-[var(--color-text)] font-sans antialiased;
     max-width: 100%;
+    overflow-x: hidden;
     transition:
       background-color 0.2s ease,
       color 0.2s ease;