feat: reduce padding for mobile

src/components/FluxNote.vue

@@ -6,22 +6,22 @@ import {
   onMounted,
   onUnmounted,
   toRefs,
-  watch,
-} from "vue"
+  watch
+} from 'vue'
 
-import LiteLoading from "@/components/LiteLoading.vue"
-import StackedNote from "@/components/StackedNote.vue"
-import { useLinks } from "@/hooks/useLinks.hook"
-import { useMarkdown } from "@/hooks/useMarkdown.hook"
-import { useNoteView } from "@/hooks/useNoteView.hook"
-import { useRouteQueryStackedNotes } from "@/hooks/useRouteQueryStackedNotes.hook"
-import { useVisitRepo } from "@/modules/history/hooks/useVisitRepo.hook"
-import CacheAllNotes from "@/modules/note/components/CacheAllNote.vue"
-import { useUserRepoStore } from "@/modules/repo/store/userRepo.store"
-import { useUserSettings } from "@/modules/user/hooks/useUserSettings.hook"
+import LiteLoading from '@/components/LiteLoading.vue'
+import StackedNote from '@/components/StackedNote.vue'
+import { useLinks } from '@/hooks/useLinks.hook'
+import { useMarkdown } from '@/hooks/useMarkdown.hook'
+import { useNoteView } from '@/hooks/useNoteView.hook'
+import { useRouteQueryStackedNotes } from '@/hooks/useRouteQueryStackedNotes.hook'
+import { useVisitRepo } from '@/modules/history/hooks/useVisitRepo.hook'
+import CacheAllNotes from '@/modules/note/components/CacheAllNote.vue'
+import { useUserRepoStore } from '@/modules/repo/store/userRepo.store'
+import { useUserSettings } from '@/modules/user/hooks/useUserSettings.hook'
 
 const HeaderNote = defineAsyncComponent(
-  () => import("@/components/HeaderNote.vue"),
+  () => import('@/components/HeaderNote.vue')
 )
 
 const props = withDefaults(
@@ -37,8 +37,8 @@ const props = withDefaults(
     content: null,
     parseContent: true,
     withContent: true,
-    withHeader: true,
-  },
+    withHeader: true
+  }
 )
 
 const user = computed(() => props.user)
@@ -49,17 +49,17 @@ const store = useUserRepoStore()
 useUserSettings()
 const { visitRepo } = useVisitRepo({ user: user, repo: repo })
 const { toHTML } = useMarkdown(repo)
-const { listenToClick } = useLinks("note-display")
+const { listenToClick } = useLinks('note-display')
 const { stackedNotes, scrollToTop } = useRouteQueryStackedNotes()
 
-const { titles } = useNoteView("note-container")
+const { titles } = useNoteView('note-container')
 
 const renderedContent = computed(() =>
   props.content !== null
     ? props.parseContent
       ? toHTML(props.content)
       : props.content
-    : store.readme,
+    : store.readme
 )
 
 const hasContent = computed(() => !!renderedContent.value)
@@ -71,7 +71,7 @@ watch(
     await nextTick()
     listenToClick()
   },
-  { immediate: true },
+  { immediate: true }
 )
 
 watch(
@@ -79,7 +79,7 @@ watch(
   () => {
     store.setUserRepo(props.user, props.repo)
   },
-  { immediate: true },
+  { immediate: true }
 )
 
 onMounted(() => visitRepo())
@@ -247,6 +247,12 @@ $header-height: 40px;
 }
 
 @media print, screen and (max-width: 768px) {
+  .flux-note {
+    .readme {
+      padding: 0 0.5rem;
+    }
+  }
+
   .flux-note {
     flex-wrap: wrap;
   }

src/components/StackedNote.vue

@@ -315,7 +315,7 @@ a.title-stacked-note-link {
     }
 
     .note-content {
-      padding: 0 1.5rem;
+      padding: 0;
     }
   }
 }