fix: fix height on mobile

src/components/StackedNote.vue

@@ -13,7 +13,11 @@ import { useFile } from "@/hooks/useFile.hook"
 import { useGitHubContent } from "@/hooks/useGitHubContent.hook"
 import { useImages } from "@/hooks/useImages.hook"
 import { useLinks } from "@/hooks/useLinks.hook"
-import { renderCodeFile, runMermaid, useShikiji } from "@/hooks/useMarkdown.hook"
+import {
+  renderCodeFile,
+  runMermaid,
+  useShikiji
+} from "@/hooks/useMarkdown.hook"
 import { getFileLanguage, isMarkdownPath } from "@/utils/fileLanguage"
 import { useNoteOverlay } from "@/hooks/useNoteOverlay.hook"
 import { useRouteQueryStackedNotes } from "@/hooks/useRouteQueryStackedNotes.hook"
@@ -54,7 +58,9 @@ const {
   getEditedSha
 } = useFile(sha)
 const initialRawContent = ref<string | null>(null)
-const isMarkdown = computed(() => (path.value ? isMarkdownPath(path.value) : true))
+const isMarkdown = computed(() =>
+  path.value ? isMarkdownPath(path.value) : true
+)
 const displayedContent = ref("")
 
 watch(
@@ -237,7 +243,11 @@ watch(mode, async (newMode) => {
       <div v-if="mode === 'edit' && isMarkdown" class="edit">
         <edit-note v-model="rawContent" />
       </div>
-      <div v-if="mode === 'read'" class="note-content" v-html="displayedContent"></div>
+      <div
+        v-if="mode === 'read'"
+        class="note-content"
+        v-html="displayedContent"
+      ></div>
     </section>
     <linked-notes v-if="hasBacklinks && content" :sha="sha" />
   </div>

src/components/WelcomeWorld.vue

@@ -533,8 +533,8 @@ const showReviewCard = computed(
                     means.
                   </p>
                   <p>
-                    Rule of thumb: write the title as the claim, and the body
+                    Rule of thumb: write the title as the claim, and the body as
-                    as the argument.
+                    the argument.
                   </p>
                 </div>
                 <div class="note-backlinks">
@@ -562,14 +562,14 @@ const showReviewCard = computed(
                 <div class="note-body">
                   <p>
                     A <em>slip-box</em> of atomic notes wired together by links
-                    instead of filed away in folders. Niklas Luhmann kept
+                    instead of filed away in folders. Niklas Luhmann kept ninety
-                    ninety thousand of them in a wooden cabinet and wrote with
+                    thousand of them in a wooden cabinet and wrote with them,
-                    them, not just about them.
+                    not just about them.
                   </p>
                   <p>
-                    Each <em>Zettel</em> earns its keep by being linked to.
+                    Each <em>Zettel</em> earns its keep by being linked to. Open
-                    Open one, follow a thread, end up somewhere you didn't plan
+                    one, follow a thread, end up somewhere you didn't plan to
-                    to go.
+                    go.
                   </p>
                 </div>
                 <div class="note-backlinks">

src/hooks/useMarkdown.hook.ts

@@ -85,7 +85,8 @@ const md = new MarkdownIt({
     },
     closeRender: () => "</div>\n",
     tabOpenRender: (data: MarkdownItTabData) => {
-      const isChecked = data.isActive || (!currentTabActiveSet && data.index === 0)
+      const isChecked =
+        data.isActive || (!currentTabActiveSet && data.index === 0)
       const checked = isChecked ? " checked" : ""
       const title = data.title.replace(/"/g, "&quot;")
       return `<input type="radio" name="md-tabs-${currentTabGroup}" class="tab" aria-label="${title}"${checked}>\n<div class="tab-content bg-base-100 border-base-300 rounded-box p-2">\n`

src/hooks/useResizeContainer.hook.ts

@@ -19,7 +19,7 @@ export const useResizeContainer = (
     }
 
     if (isMobile.value) {
-      container.style.height = `${(stackedNotes.value.length + 1) * 100}vh`
+      container.style.height = `${(stackedNotes.value.length + 1) * 100}dvh`
     } else {
       container.style.minWidth = `${
         getNoteWidth() * (stackedNotes.value.length + 1)

src/modules/repo/store/userRepo.store.ts

@@ -185,7 +185,10 @@ export const useUserRepoStore = defineStore("USER_REPO_STATE", {
         DataType.SavedRepo,
         `${this.user}-${this.repo}`
       )
-      const newFiles = [...toRaw(this.files).filter((f) => f.sha !== file.sha), toRaw(file)]
+      const newFiles = [
+        ...toRaw(this.files).filter((f) => f.sha !== file.sha),
+        toRaw(file)
+      ]
       data.update<DataType.SavedRepo, SavedRepo>({
         _id: savedRepoId,
         $type: DataType.SavedRepo,

src/utils/alloy.tmLanguage.json

@@ -33,11 +33,23 @@
             { "match": "\\b(fact)\\b", "name": "keyword.language.fact.alloy" },
             { "match": "\\b(pred)\\b", "name": "keyword.language.pred.alloy" },
             { "match": "\\b(fun)\\b", "name": "keyword.language.fun.alloy" },
-            { "match": "\\b(module)\\b", "name": "keyword.language.module.alloy" },
+            {
-            { "match": "\\b(extends)\\b", "name": "keyword.language.extends.alloy" },
+              "match": "\\b(module)\\b",
+              "name": "keyword.language.module.alloy"
+            },
+            {
+              "match": "\\b(extends)\\b",
+              "name": "keyword.language.extends.alloy"
+            },
             { "match": ":", "name": "keyword.other.colon.alloy" },
-            { "match": "\\b(check)\\b", "name": "keyword.language.check.alloy" },
+            {
-            { "match": "\\b(assert)\\b", "name": "keyword.language.assert.alloy" },
+              "match": "\\b(check)\\b",
+              "name": "keyword.language.check.alloy"
+            },
+            {
+              "match": "\\b(assert)\\b",
+              "name": "keyword.language.assert.alloy"
+            },
             { "match": "\\b(run)\\b", "name": "keyword.language.run.alloy" },
             { "match": "\\b(open)\\b", "name": "keyword.other.open.alloy" },
             { "match": "\\b(as)\\b", "name": "keyword.other.as.alloy" },
@@ -47,9 +59,18 @@
         "modifier": {
           "patterns": [
             { "match": "\\b(var)\\b", "name": "keyword.modifier.var.alloy" },
-            { "match": "\\b(private)\\b", "name": "keyword.modifier.private.alloy" },
+            {
-            { "match": "\\b(abstract)\\b", "name": "keyword.modifier.abstract.alloy" },
+              "match": "\\b(private)\\b",
-            { "match": "\\b(all|disj|lone|no|one|set|seq|some|sum|univ|none)\\b", "name": "keyword.modifier.set.alloy" }
+              "name": "keyword.modifier.private.alloy"
+            },
+            {
+              "match": "\\b(abstract)\\b",
+              "name": "keyword.modifier.abstract.alloy"
+            },
+            {
+              "match": "\\b(all|disj|lone|no|one|set|seq|some|sum|univ|none)\\b",
+              "name": "keyword.modifier.set.alloy"
+            }
           ]
         },
         "operator": {
@@ -73,14 +94,26 @@
             },
             "unary": {
               "patterns": [
-                { "match": "!|#|~|\\*|\\^|(\\b(not)\\b)", "name": "keyword.operator.unary.alloy" }
+                {
+                  "match": "!|#|~|\\*|\\^|(\\b(not)\\b)",
+                  "name": "keyword.operator.unary.alloy"
+                }
               ]
             },
             "binary": {
               "patterns": [
-                { "match": "(?:\\|\\|)|&&|<=>|=>|&|\\+|-|\\+\\+|<:|:>|\\.|=|->", "name": "keyword.operator.binary.alloy" },
+                {
-                { "match": "\\b(and|or|iff|implies|else|in)\\b", "name": "keyword.operator.binary.alloy" },
+                  "match": "(?:\\|\\|)|&&|<=>|=>|&|\\+|-|\\+\\+|<:|:>|\\.|=|->",
-                { "match": "=|<|>|=<|>=", "name": "keyword.operator.binary.alloy" },
+                  "name": "keyword.operator.binary.alloy"
+                },
+                {
+                  "match": "\\b(and|or|iff|implies|else|in)\\b",
+                  "name": "keyword.operator.binary.alloy"
+                },
+                {
+                  "match": "=|<|>|=<|>=",
+                  "name": "keyword.operator.binary.alloy"
+                },
                 { "match": ",", "name": "keyword.other.comma.alloy" },
                 { "match": "\\|", "name": "keyword.other.split.alloy" }
               ]
@@ -97,8 +130,14 @@
           "patterns": [
             { "match": "\\b(for)\\b", "name": "keyword.control.for.alloy" },
             { "match": "\\b(but)\\b", "name": "keyword.control.but.alloy" },
-            { "match": "\\b(exactly)\\b", "name": "keyword.control.exactly.alloy" },
+            {
-            { "match": "\\b(expect)\\b", "name": "keyword.control.expect.alloy" },
+              "match": "\\b(exactly)\\b",
+              "name": "keyword.control.exactly.alloy"
+            },
+            {
+              "match": "\\b(expect)\\b",
+              "name": "keyword.control.expect.alloy"
+            },
             { "match": "\\b(steps)\\b", "name": "keyword.control.steps.alloy" }
           ]
         }
@@ -150,21 +189,34 @@
                 {
                   "begin": "(extends)",
                   "end": "(?=\\{)",
-                  "beginCaptures": { "1": { "name": "keyword.language.extends.alloy" } },
+                  "beginCaptures": {
+                    "1": { "name": "keyword.language.extends.alloy" }
+                  },
                   "patterns": [
-                    { "match": "(?:\\w|'|_|\\d|/)+", "name": "entity.other.inherited-class.alloy" }
+                    {
+                      "match": "(?:\\w|'|_|\\d|/)+",
+                      "name": "entity.other.inherited-class.alloy"
+                    }
                   ]
                 },
                 {
                   "begin": "(in)",
                   "end": "(?=\\{)",
-                  "beginCaptures": { "1": { "name": "keyword.other.in.alloy" } },
+                  "beginCaptures": {
+                    "1": { "name": "keyword.other.in.alloy" }
+                  },
                   "patterns": [
-                    { "match": "(?:\\w|'|_|\\d|/)+", "name": "entity.other.inherited-class.alloy" },
+                    {
+                      "match": "(?:\\w|'|_|\\d|/)+",
+                      "name": "entity.other.inherited-class.alloy"
+                    },
                     { "match": "\\+", "name": "keyword.operator.binary.alloy" }
                   ]
                 },
-                { "match": "(?:\\w|'|_|\\d|/)+", "name": "entity.name.type.signature.alloy" },
+                {
+                  "match": "(?:\\w|'|_|\\d|/)+",
+                  "name": "entity.name.type.signature.alloy"
+                },
                 { "match": ",", "name": "keyword.other.comma.alloy" }
               ]
             }

src/utils/downloadFont.ts

@@ -1,21 +1,29 @@
 import FontFaceObserver from "fontfaceobserver"
 
 const GENERIC_FAMILIES = new Set([
-  "serif", "sans-serif", "monospace", "cursive", "fantasy",
+  "serif",
-  "system-ui", "ui-serif", "ui-sans-serif", "ui-monospace", "ui-rounded",
+  "sans-serif",
+  "monospace",
+  "cursive",
+  "fantasy",
+  "system-ui",
+  "ui-serif",
+  "ui-sans-serif",
+  "ui-monospace",
+  "ui-rounded"
 ])
 
 const parseWebFontFamilies = (font: string): string[] =>
   font
     .split(",")
-    .map(f => f.trim().replace(/^["']|["']$/g, ""))
+    .map((f) => f.trim().replace(/^["']|["']$/g, ""))
-    .filter(f => f && !GENERIC_FAMILIES.has(f))
+    .filter((f) => f && !GENERIC_FAMILIES.has(f))
 
 const assembleFontLink = (families: string[]): string | null => {
   if (families.length === 0) return null
-  return `https://api.fonts.coollabs.io/css2?display=swap&${
+  return `https://api.fonts.coollabs.io/css2?display=swap&${families
-    families.map(f => `family=${f.replaceAll(" ", "+")}`).join("&")
+    .map((f) => `family=${f.replaceAll(" ", "+")}`)
-  }`
+    .join("&")}`
 }
 
 export const downloadFont = async (
@@ -28,7 +36,7 @@ export const downloadFont = async (
   if (href) {
     const alreadyLoaded = Array.from(
       document.head.querySelectorAll<HTMLLinkElement>('link[rel="stylesheet"]')
-    ).some(link => link.href === href)
+    ).some((link) => link.href === href)
 
     if (!alreadyLoaded) {
       const link = document.createElement("link")