fix: 修复屏幕横向增长

package.json

@@ -87,6 +87,7 @@
     "autoprefixer": "^10.4.16",
     "postcss": "^8.4.31",
     "prettier": "^3.1.0",
+    "sass": "^1.69.5",
     "tailwindcss": "^3.3.5",
     "typescript": "^5.2.2",
     "vite": "^4.5.1",

src/components/codemirror/index.tsx

@@ -52,6 +52,7 @@ const Codemirror = memo((props: CodemirrorProps) => {
           "&": {
             "flex-grow": 1,
             outline: "none",
+            "min-width": "0px"
           },
           "&.cm-focused": {
             outline: "none",
@@ -82,6 +83,6 @@ const Codemirror = memo((props: CodemirrorProps) => {
     }
   }, [parentRef])
 
-  return <div ref={parentRef} className={clsx("flex items-stretch", props.className)} />
+  return <div ref={parentRef} className={clsx("flex items-stretch min-w-0", props.className)} />
 })
 export default Codemirror

src/main.tsx

@@ -1,7 +1,7 @@
 import React from "react"
 import ReactDOM from "react-dom/client"
 import "normalize.css"
-import "./styles.css"
+import "./styles.scss"
 import "@fontsource/jetbrains-mono"
 import Router from "./router"
 import { DndProvider } from "react-dnd"
@@ -17,6 +17,11 @@ async function maskContextMenu() {
   const debug = await isDebug()
   if (!debug) {
     document.oncontextmenu = (event) => event.preventDefault()
+    document.addEventListener("keydown", (e) => {
+      if (e.key == "r" && e.ctrlKey) {
+        e.preventDefault()
+      }
+    })
   }
 }
 

src/pages/Preference/index.tsx

@@ -4,7 +4,7 @@ import PrefCatalog from "./catalog"
 import { Suspense } from "react"
 import Loading from "@/components/loading"
 import { useZoom } from "@/hooks/useZoom"
-import { AnimatePresence, motion } from "framer-motion"
+import { motion } from "framer-motion"
 
 export default function Preference() {
   useZoom()

src/styles.css → src/styles.scss

@@ -1,3 +1,4 @@
+@use "./styles/scrollbar.scss";
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
@@ -87,3 +88,4 @@ body,
   display: flex;
   flex-direction: row;
 }
+

src/styles/scrollbar.scss

@@ -0,0 +1,14 @@
+* {
+  &::-webkit-scrollbar{
+    width: 6px;
+    height: 6px;
+  }
+  &::-webkit-scrollbar-thumb {
+    background-color: darkgrey;
+    outline: 1px solid slategrey;
+    border-radius: 4px;
+  }
+  &::-webkit-scrollbar-track {
+    box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
+  }
+}