fix: fix height on mobile

2026-04-29 10:34:46 +02:00
parent 86866e7d77
commit adb1bd5945
7 changed files with 114 additions and 40 deletions
--- a/src/components/StackedNote.vue
+++ b/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>
--- a/src/components/WelcomeWorld.vue
+++ b/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
-                    as the argument.
+                    Rule of thumb: write the title as the claim, and the body as
+                    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
-                    ninety thousand of them in a wooden cabinet and wrote with
-                    them, not just about them.
+                    instead of filed away in folders. Niklas Luhmann kept ninety
+                    thousand of them in a wooden cabinet and wrote with them,
+                    not just about them.
                  </p>
                  <p>
-                    Each <em>Zettel</em> earns its keep by being linked to.
-                    Open one, follow a thread, end up somewhere you didn't plan
-                    to go.
+                    Each <em>Zettel</em> earns its keep by being linked to. Open
+                    one, follow a thread, end up somewhere you didn't plan to
+                    go.
                  </p>
                </div>
                <div class="note-backlinks">
--- a/src/hooks/useMarkdown.hook.ts
+++ b/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`
--- a/src/hooks/useResizeContainer.hook.ts
+++ b/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)
--- a/src/modules/repo/store/userRepo.store.ts
+++ b/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,
--- a/src/utils/alloy.tmLanguage.json
+++ b/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(all|disj|lone|no|one|set|seq|some|sum|univ|none)\\b", "name": "keyword.modifier.set.alloy" }
+            {
+              "match": "\\b(private)\\b",
+              "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": "=|<|>|=<|>=", "name": "keyword.operator.binary.alloy" },
+                {
+                  "match": "(?:\\|\\|)|&&|<=>|=>|&|\\+|-|\\+\\+|<:|:>|\\.|=|->",
+                  "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" }
              ]
            }
--- a/src/utils/downloadFont.ts
+++ b/src/utils/downloadFont.ts
@@ -1,21 +1,29 @@
 import FontFaceObserver from "fontfaceobserver"

 const GENERIC_FAMILIES = new Set([
-  "serif", "sans-serif", "monospace", "cursive", "fantasy",
-  "system-ui", "ui-serif", "ui-sans-serif", "ui-monospace", "ui-rounded",
+  "serif",
+  "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, ""))
-    .filter(f => f && !GENERIC_FAMILIES.has(f))
+    .map((f) => f.trim().replace(/^["']|["']$/g, ""))
+    .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&${
-    families.map(f => `family=${f.replaceAll(" ", "+")}`).join("&")
-  }`
+  return `https://api.fonts.coollabs.io/css2?display=swap&${families
+    .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")