From 0a3a8fbd71f26c5eb1ac53df314570d803ce8d5f Mon Sep 17 00:00:00 2001
From: Kuchizu <legolashacker0@gmail.com>
Date: Wed, 23 Sep 2026 22:13:41 +0300
Subject: [PATCH 1/3] Adapt layout for mobile and tablet screens

---
 @codexteam/ui/src/styles/typography.pcss      |  4 +--
 .../ui/src/vue/components/card/Card.vue       | 24 ++++++++++++++--
 .../src/vue/components/card/CardSkeleton.vue  | 15 ++++++++--
 .../ui/src/vue/components/editor/Editor.vue   |  7 +++++
 .../ui/src/vue/components/input/Input.vue     |  4 +++
 .../ui/src/vue/components/popup/Popup.vue     | 21 ++++++++++++++
 @codexteam/ui/src/vue/components/row/Row.vue  | 15 ++++++++++
 .../ui/src/vue/components/tabbar/Tab.vue      | 28 ++++++++++++++++++-
 .../components/vertical-menu/VerticalMenu.vue |  4 +++
 .../ui/src/vue/layout/navbar/Navbar.vue       |  4 +++
 .../src/vue/layout/page-block/PageBlock.vue   | 22 +++++++++++++++
 src/App.vue                                   |  1 +
 .../components/note-header/NoteHeader.vue     | 15 ++++++++++
 .../components/note-list/NoteList.vue         | 16 ++++++++++-
 src/presentation/pages/AuthorizationPage.vue  |  3 +-
 src/presentation/pages/Join.vue               |  3 +-
 src/presentation/pages/Note.vue               | 22 ++++++++++++++-
 src/presentation/pages/NoteSettings.vue       |  4 +++
 18 files changed, 199 insertions(+), 13 deletions(-)

diff --git a/@codexteam/ui/src/styles/typography.pcss b/@codexteam/ui/src/styles/typography.pcss
index 195f0140..f0656d69 100644
--- a/@codexteam/ui/src/styles/typography.pcss
+++ b/@codexteam/ui/src/styles/typography.pcss
@@ -32,7 +32,7 @@
    * Should be used only for content (user-written text), not for UI elements.
    */
   --text-h1 {
-    font-size: 2.8rem;
+    font-size: clamp(2rem, 1.17rem + 3.17vw, 2.8rem);
     line-height: 110%;
     font-weight: 700;
     margin: 0;
@@ -41,7 +41,7 @@
   --text-h2 {
     font-weight: 700;
     line-height: 120%;
-    font-size: 1.8rem;
+    font-size: clamp(1.5rem, 1.19rem + 1.19vw, 1.8rem);
   }
 
   --text-h3 {
diff --git a/@codexteam/ui/src/vue/components/card/Card.vue b/@codexteam/ui/src/vue/components/card/Card.vue
index 93bfafb3..8e638501 100644
--- a/@codexteam/ui/src/vue/components/card/Card.vue
+++ b/@codexteam/ui/src/vue/components/card/Card.vue
@@ -79,8 +79,6 @@ withDefaults(
 
 <style module lang="postcss">
 .card {
-  --card-width: 222px;
-
   display: flex;
   flex-direction: column;
   align-items: flex-start;
@@ -111,7 +109,7 @@ withDefaults(
   }
 
   &--vertical {
-    width: var(--card-width);
+    width: var(--card-width, 222px);
   }
 
   &__body {
@@ -142,6 +140,26 @@ withDefaults(
   &__title {
     color: var(--base--text);
   }
+
+  @media (max-width: 768px) {
+    &--horizontal {
+      flex-wrap: wrap;
+      gap: var(--spacing-ml);
+
+      .card__cover {
+        width: 96px;
+        height: 64px;
+      }
+
+      .card__body {
+        min-width: 0;
+      }
+
+      > :nth-child(n + 3) {
+        flex-basis: 100%;
+      }
+    }
+  }
 }
 
 @keyframes card-skeleton-animation {
diff --git a/@codexteam/ui/src/vue/components/card/CardSkeleton.vue b/@codexteam/ui/src/vue/components/card/CardSkeleton.vue
index 3aa60ae0..ded73313 100644
--- a/@codexteam/ui/src/vue/components/card/CardSkeleton.vue
+++ b/@codexteam/ui/src/vue/components/card/CardSkeleton.vue
@@ -56,8 +56,6 @@ withDefaults(
 
 <style module lang="postcss">
 .card-skeleton {
-  --card-width: 222px;
-
   --skeleton-line-bg: var(--base--text-secondary);
 
   display: flex;
@@ -104,7 +102,7 @@ withDefaults(
   }
 
   &--vertical {
-    width: var(--card-width);
+    width: var(--card-width, 222px);
   }
 
   &__cover {
@@ -127,6 +125,17 @@ withDefaults(
     background-size: 200% 100%;
     animation: skeleton-animation 3s infinite linear;
   }
+
+  @media (max-width: 768px) {
+    &--horizontal {
+      gap: var(--spacing-ml);
+
+      .card-skeleton__cover {
+        width: 96px;
+        height: 64px;
+      }
+    }
+  }
 }
 
 @keyframes skeleton-animation {
diff --git a/@codexteam/ui/src/vue/components/editor/Editor.vue b/@codexteam/ui/src/vue/components/editor/Editor.vue
index cd3c1b08..e746f219 100644
--- a/@codexteam/ui/src/vue/components/editor/Editor.vue
+++ b/@codexteam/ui/src/vue/components/editor/Editor.vue
@@ -199,6 +199,13 @@ defineExpose({
     }
   }
 
+  @media (max-width: 768px) {
+    .cdx-search-field__input,
+    .ce-inline-tool-input {
+      font-size: 16px;
+    }
+  }
+
   .ce-popover__nothing-found-message {
     color: var(--base--text-secondary);
   }
diff --git a/@codexteam/ui/src/vue/components/input/Input.vue b/@codexteam/ui/src/vue/components/input/Input.vue
index c9ff18a6..0e27e196 100644
--- a/@codexteam/ui/src/vue/components/input/Input.vue
+++ b/@codexteam/ui/src/vue/components/input/Input.vue
@@ -101,5 +101,9 @@ onMounted(() => {
 
   padding: var(--v-padding) var(--h-padding);
   border-radius: var(--radius-field);
+
+  @media (max-width: 768px) {
+    font-size: 16px;
+  }
 }
 </style>
diff --git a/@codexteam/ui/src/vue/components/popup/Popup.vue b/@codexteam/ui/src/vue/components/popup/Popup.vue
index 2cb38604..8245b7c1 100644
--- a/@codexteam/ui/src/vue/components/popup/Popup.vue
+++ b/@codexteam/ui/src/vue/components/popup/Popup.vue
@@ -94,6 +94,27 @@ withDefaults(
       color: var(--base--text);
     }
   }
+
+  @media (max-width: 768px) {
+    grid-template-columns: minmax(0, 1fr);
+    justify-items: center;
+    padding: var(--spacing-ml);
+    overflow-y: auto;
+
+    &__container {
+      grid-column: 1;
+      grid-row: 2;
+      max-width: 100%;
+      box-sizing: border-box;
+    }
+
+    &__icon {
+      grid-column: 1;
+      grid-row: 1;
+      justify-self: end;
+      margin: 0 0 var(--spacing-s);
+    }
+  }
 }
 
 </style>
diff --git a/@codexteam/ui/src/vue/components/row/Row.vue b/@codexteam/ui/src/vue/components/row/Row.vue
index 1f84e7e8..54735481 100644
--- a/@codexteam/ui/src/vue/components/row/Row.vue
+++ b/@codexteam/ui/src/vue/components/row/Row.vue
@@ -103,6 +103,7 @@ defineProps<{
 
   &__center {
     flex: 1;
+    min-width: 0;
     display: flex;
     flex-direction: column;
     gap: var(--spacing-very-x);
@@ -112,5 +113,19 @@ defineProps<{
     display: flex;
     align-items: center;
   }
+
+  @media (max-width: 768px) {
+    &__body-inner {
+      flex-wrap: wrap;
+    }
+
+    &__center {
+      flex-basis: 8rem;
+    }
+
+    &__right {
+      margin-left: auto;
+    }
+  }
 }
 </style>
diff --git a/@codexteam/ui/src/vue/components/tabbar/Tab.vue b/@codexteam/ui/src/vue/components/tabbar/Tab.vue
index 28952bc3..2533f28b 100644
--- a/@codexteam/ui/src/vue/components/tabbar/Tab.vue
+++ b/@codexteam/ui/src/vue/components/tabbar/Tab.vue
@@ -43,6 +43,7 @@
 </template>
 
 <script setup lang="ts">
+import { onMounted, ref, watch } from 'vue';
 import Icon from '../icon/Icon.vue';
 import { TabParams } from './Tab.types';
 
@@ -53,7 +54,7 @@ defineEmits([
   'close',
 ]);
 
-withDefaults(
+const props = withDefaults(
   defineProps<TabParams>(),
   {
     isActive: false,
@@ -62,6 +63,23 @@ withDefaults(
     closable: false,
   }
 );
+
+const tabElement = ref<HTMLElement | null>(null);
+
+/**
+ * Keeps the active tab visible when the tabbar is scrolled horizontally
+ */
+function scrollIntoViewIfActive(): void {
+  if (props.isActive) {
+    tabElement.value?.scrollIntoView({
+      block: 'nearest',
+      inline: 'nearest',
+    });
+  }
+}
+
+onMounted(scrollIntoViewIfActive);
+watch(() => props.isActive, scrollIntoViewIfActive, { flush: 'post' });
 </script>
 
 <style module>
@@ -148,5 +166,13 @@ withDefaults(
       border-radius: var(--radius-s) var(--radius-s) 0 0;
     }
   }
+
+  @media (max-width: 768px) {
+    --tab-text-max-width: 120px;
+
+    &__body-image + &__body-text {
+      display: none;
+    }
+  }
 }
 </style>
diff --git a/@codexteam/ui/src/vue/components/vertical-menu/VerticalMenu.vue b/@codexteam/ui/src/vue/components/vertical-menu/VerticalMenu.vue
index 4c61e412..4e47dfab 100644
--- a/@codexteam/ui/src/vue/components/vertical-menu/VerticalMenu.vue
+++ b/@codexteam/ui/src/vue/components/vertical-menu/VerticalMenu.vue
@@ -29,5 +29,9 @@ defineProps<{
   gap: var(--spacing-very-x);
   background-color: var(--base--bg-secondary);
   width: max-content;
+
+  @media (max-width: 768px) {
+    width: auto;
+  }
 }
 </style>
diff --git a/@codexteam/ui/src/vue/layout/navbar/Navbar.vue b/@codexteam/ui/src/vue/layout/navbar/Navbar.vue
index 328e1f97..54127e6b 100644
--- a/@codexteam/ui/src/vue/layout/navbar/Navbar.vue
+++ b/@codexteam/ui/src/vue/layout/navbar/Navbar.vue
@@ -26,5 +26,9 @@
   &__right {
       margin-left: auto;
   }
+
+  @media (max-width: 768px) {
+    padding: var(--spacing-ms) var(--spacing-m);
+  }
 }
 </style>
diff --git a/@codexteam/ui/src/vue/layout/page-block/PageBlock.vue b/@codexteam/ui/src/vue/layout/page-block/PageBlock.vue
index 3d5c382f..b155cd91 100644
--- a/@codexteam/ui/src/vue/layout/page-block/PageBlock.vue
+++ b/@codexteam/ui/src/vue/layout/page-block/PageBlock.vue
@@ -79,4 +79,26 @@ defineProps({
     padding: var(--spacing-xxl) var(--spacing-ml);
   }
 }
+
+@media (max-width: 1300px) {
+  .page-block__sidebar:empty {
+    display: none;
+  }
+}
+
+@media (max-width: 768px) {
+  .page-block {
+    flex-direction: column;
+  }
+
+  .page-block__content {
+    max-width: none;
+    padding: var(--spacing-l) var(--spacing-ml);
+  }
+
+  .page-block__sidebar {
+    width: auto;
+    padding: var(--spacing-l) var(--spacing-ml) 0;
+  }
+}
 </style>
diff --git a/src/App.vue b/src/App.vue
index 70751eb9..9e8c495d 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -46,5 +46,6 @@ body {
   -moz-osx-font-smoothing: grayscale;
   display: grid;
   grid-template-rows: auto 1fr;
+  grid-template-columns: minmax(0, 1fr);
 }
 </style>
diff --git a/src/presentation/components/note-header/NoteHeader.vue b/src/presentation/components/note-header/NoteHeader.vue
index 1d26df61..631ba6e6 100644
--- a/src/presentation/components/note-header/NoteHeader.vue
+++ b/src/presentation/components/note-header/NoteHeader.vue
@@ -21,6 +21,7 @@
   opacity: var(--opacity);
   transition: opacity 100ms;
   justify-content: space-between;
+  gap: var(--spacing-s);
   padding: var(--spacing-s) var(--spacing-m);
   position: sticky;
   top: var(--layout-navbar-height);
@@ -28,11 +29,25 @@
   z-index: var(--z-note-header);
 
   &__left {
+    flex: 1 1 0;
+    min-width: 0;
     color: var(--base--text-secondary);
+
+    @media (max-width: 768px) {
+      overflow-x: auto;
+      white-space: nowrap;
+      scrollbar-width: none;
+
+      &::-webkit-scrollbar {
+        display: none;
+      }
+    }
   }
 
   &__right {
     display: flex;
+    flex-wrap: wrap;
+    justify-content: flex-end;
     gap: var(--spacing-s);
     align-items: center;
   }
diff --git a/src/presentation/components/note-list/NoteList.vue b/src/presentation/components/note-list/NoteList.vue
index b70626aa..5182e6e4 100644
--- a/src/presentation/components/note-list/NoteList.vue
+++ b/src/presentation/components/note-list/NoteList.vue
@@ -86,12 +86,26 @@ function getSubtitle(note: Note): string | undefined {
 
 <style lang="postcss" module>
 .notes-container {
+  --card-width: 100%;
+
   padding: var(--spacing-xxl) 0;
   gap: var(--spacing-ml);
   display: grid;
   width: 100%;
   box-sizing: border-box;
-  grid-template-columns: repeat(3, 1fr);
+  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
+
+  > a {
+    display: flex;
+  }
+
+  @media (max-width: 768px) {
+    --v-padding: var(--spacing-s);
+    --h-padding: var(--spacing-s);
+
+    padding: var(--spacing-l) 0;
+    gap: var(--spacing-s);
+  }
 }
 
 .button {
diff --git a/src/presentation/pages/AuthorizationPage.vue b/src/presentation/pages/AuthorizationPage.vue
index 932f01c5..083a3c3c 100644
--- a/src/presentation/pages/AuthorizationPage.vue
+++ b/src/presentation/pages/AuthorizationPage.vue
@@ -46,7 +46,8 @@ watch(user, () => {
   display: flex;
   justify-content: center;
   align-items: center;
-  height: 100vh;
+  padding: var(--spacing-l) var(--spacing-ml);
+  text-align: center;
   flex-direction: column;
   gap: var(--spacing-l)
 }
diff --git a/src/presentation/pages/Join.vue b/src/presentation/pages/Join.vue
index 502eae1c..641c2909 100644
--- a/src/presentation/pages/Join.vue
+++ b/src/presentation/pages/Join.vue
@@ -86,6 +86,7 @@ watch(user, async () => {
   display: flex;
   justify-content: center;
   align-items: center;
-  height: 100vh;
+  padding: var(--spacing-l) var(--spacing-ml);
+  text-align: center;
 }
 </style>
diff --git a/src/presentation/pages/Note.vue b/src/presentation/pages/Note.vue
index d04c68a5..139d9887 100644
--- a/src/presentation/pages/Note.vue
+++ b/src/presentation/pages/Note.vue
@@ -44,7 +44,10 @@
     </div>
     <div v-else>
       <PageBlock>
-        <template #left>
+        <template
+          v-if="!isMobile"
+          #left
+        >
           <VerticalMenu
             class="menu"
             :items="[verticalMenuItems]"
@@ -57,6 +60,11 @@
             v-bind="editorConfig"
             @change="noteChanged"
           />
+          <VerticalMenu
+            v-if="isMobile && noteHierarchy?.childNotes?.length"
+            class="menu"
+            :items="[verticalMenuItems]"
+          />
         </template>
       </PageBlock>
     </div>
@@ -65,6 +73,7 @@
 
 <script lang="ts" setup>
 import { computed, ref, toRef, watch } from 'vue';
+import { useMediaQuery } from '@vueuse/core';
 import { Button, Editor, PageBlock, VerticalMenu, type VerticalMenuItem } from '@codexteam/ui/vue';
 import useNote from '@/application/services/useNote';
 import { useRoute, useRouter } from 'vue-router';
@@ -99,6 +108,11 @@ const props = defineProps<{
 
 const noteId = toRef(props, 'id');
 
+/**
+ * On mobile the note hierarchy goes below the note instead of the sidebar, and only when the note has relatives
+ */
+const isMobile = useMediaQuery('(max-width: 768px)');
+
 const { note, noteTools, save, noteTitle, canEdit, noteParents, noteHierarchy } = useNote({
   id: noteId,
 });
@@ -240,4 +254,10 @@ watch(noteTitle, () => {
   color: var(--base--text-secondary);
   padding-right: var(--h-padding);
 }
+
+@media (max-width: 768px) {
+  .last_edit {
+    display: none;
+  }
+}
 </style>
diff --git a/src/presentation/pages/NoteSettings.vue b/src/presentation/pages/NoteSettings.vue
index f2cbccc6..dec71f94 100644
--- a/src/presentation/pages/NoteSettings.vue
+++ b/src/presentation/pages/NoteSettings.vue
@@ -256,6 +256,10 @@ async function handleTeamMemberRemoved(userId: TeamMember['user']['id']) {
   &__subheading {
     color: var(--text-secondary);
   }
+
+  @media (max-width: 768px) {
+    margin: 0;
+  }
 }
 
 .form{

From 48a0f520f68175c8f06350a471939e5546a330c1 Mon Sep 17 00:00:00 2001
From: Kuchizu <legolashacker0@gmail.com>
Date: Fri, 25 Sep 2026 00:16:01 +0300
Subject: [PATCH 2/3] Move breakpoints and sizes into design system tokens

---
 @codexteam/ui/package.json                    |  1 +
 @codexteam/ui/postcss.config.js               | 10 ++++++-
 @codexteam/ui/src/styles/breakpoints.pcss     |  4 +++
 @codexteam/ui/src/styles/dimensions.pcss      |  3 +++
 @codexteam/ui/src/styles/typography.pcss      |  3 +++
 .../ui/src/vue/components/card/Card.vue       | 27 ++++++++++++++-----
 .../src/vue/components/card/CardSkeleton.vue  |  9 +++----
 .../ui/src/vue/components/editor/Editor.vue   |  4 +--
 .../ui/src/vue/components/input/Input.vue     |  4 +--
 .../ui/src/vue/components/popup/Popup.vue     |  2 +-
 @codexteam/ui/src/vue/components/row/Row.vue  |  4 +--
 .../ui/src/vue/components/tabbar/Tab.vue      |  7 ++---
 .../components/vertical-menu/VerticalMenu.vue |  2 +-
 .../src/vue/composables/useViewport/index.ts  |  8 ++++++
 @codexteam/ui/src/vue/index.ts                |  1 +
 .../ui/src/vue/layout/navbar/Navbar.vue       |  2 +-
 .../src/vue/layout/page-block/PageBlock.vue   |  4 +--
 package.json                                  |  1 +
 postcss.config.js                             | 10 ++++++-
 .../components/note-header/NoteHeader.vue     |  2 +-
 .../components/note-list/NoteList.vue         |  4 +--
 src/presentation/pages/Note.vue               | 10 +++----
 src/presentation/pages/NoteSettings.vue       |  2 +-
 src/presentation/styles/sizes.pcss            |  1 +
 yarn.lock                                     | 11 ++++++++
 25 files changed, 95 insertions(+), 41 deletions(-)
 create mode 100644 @codexteam/ui/src/styles/breakpoints.pcss
 create mode 100644 @codexteam/ui/src/vue/composables/useViewport/index.ts

diff --git a/@codexteam/ui/package.json b/@codexteam/ui/package.json
index 70c7ea3f..1f69aaa1 100644
--- a/@codexteam/ui/package.json
+++ b/@codexteam/ui/package.json
@@ -54,6 +54,7 @@
   },
   "devDependencies": {
     "@codexteam/icons": "^0.3.3",
+    "@csstools/postcss-global-data": "^2.1.1",
     "@editorjs/header": "^2.8.6",
     "@editorjs/nested-list": "^1.4.2",
     "@types/node": "^20.11.15",
diff --git a/@codexteam/ui/postcss.config.js b/@codexteam/ui/postcss.config.js
index 6f1ee2c6..8333ef19 100644
--- a/@codexteam/ui/postcss.config.js
+++ b/@codexteam/ui/postcss.config.js
@@ -1,3 +1,5 @@
+import { fileURLToPath } from 'url';
+import postcssGlobalData from '@csstools/postcss-global-data';
 import postcssNested from 'postcss-nested';
 import postcssPresetEnv from 'postcss-preset-env';
 import postcssApply from 'postcss-apply';
@@ -10,6 +12,12 @@ import postcssHoverMediaFeature from 'postcss-hover-media-feature';
  */
 export default function () {
   return {
-    plugins: [postcssNested(), postcssPresetEnv(), postcssApply(), postcssHoverMediaFeature()],
+    plugins: [
+      postcssGlobalData({ files: [fileURLToPath(new URL('./src/styles/breakpoints.pcss', import.meta.url))] }),
+      postcssNested(),
+      postcssPresetEnv(),
+      postcssApply(),
+      postcssHoverMediaFeature(),
+    ],
   };
 }
diff --git a/@codexteam/ui/src/styles/breakpoints.pcss b/@codexteam/ui/src/styles/breakpoints.pcss
new file mode 100644
index 00000000..2d24d834
--- /dev/null
+++ b/@codexteam/ui/src/styles/breakpoints.pcss
@@ -0,0 +1,4 @@
+@custom-media --mobile (max-width: 768px);
+
+/* 700px content plus two 300px sidebars */
+@custom-media --narrow (max-width: 1300px);
diff --git a/@codexteam/ui/src/styles/dimensions.pcss b/@codexteam/ui/src/styles/dimensions.pcss
index fa0b3646..bdc73c0a 100644
--- a/@codexteam/ui/src/styles/dimensions.pcss
+++ b/@codexteam/ui/src/styles/dimensions.pcss
@@ -18,6 +18,9 @@
    */
   --size-icon: 20px;
   --size-avatar: 30px;
+  --size-cover: 150px;
+  --size-cover-small: 96px;
+  --size-text-min: 120px;
 
   /**
    * Layout
diff --git a/@codexteam/ui/src/styles/typography.pcss b/@codexteam/ui/src/styles/typography.pcss
index f0656d69..f7e63620 100644
--- a/@codexteam/ui/src/styles/typography.pcss
+++ b/@codexteam/ui/src/styles/typography.pcss
@@ -27,6 +27,9 @@
    */
   font-size: 15px;
 
+  /* iOS Safari zooms into focused fields below 16px */
+  --font-size-field-mobile: 16px;
+
   /**
    * Content styles
    * Should be used only for content (user-written text), not for UI elements.
diff --git a/@codexteam/ui/src/vue/components/card/Card.vue b/@codexteam/ui/src/vue/components/card/Card.vue
index 8e638501..24345d15 100644
--- a/@codexteam/ui/src/vue/components/card/Card.vue
+++ b/@codexteam/ui/src/vue/components/card/Card.vue
@@ -28,7 +28,12 @@
         {{ subtitle }}
       </div>
     </div>
-    <slot />
+    <div
+      v-if="$slots.default"
+      :class="$style['card__actions']"
+    >
+      <slot />
+    </div>
   </div>
 </template>
 
@@ -95,8 +100,8 @@ withDefaults(
     box-sizing: border-box;
 
     .card__cover {
-      width: 150px;
-      height: 100px;
+      width: var(--size-cover);
+      aspect-ratio: 3 / 2;
     }
   }
 
@@ -141,22 +146,30 @@ withDefaults(
     color: var(--base--text);
   }
 
-  @media (max-width: 768px) {
+  &__actions {
+    display: flex;
+
+    &:empty {
+      display: none;
+    }
+  }
+
+  @media (--mobile) {
     &--horizontal {
       flex-wrap: wrap;
       gap: var(--spacing-ml);
 
       .card__cover {
-        width: 96px;
-        height: 64px;
+        width: var(--size-cover-small);
       }
 
       .card__body {
         min-width: 0;
       }
 
-      > :nth-child(n + 3) {
+      .card__actions {
         flex-basis: 100%;
+        flex-direction: column;
       }
     }
   }
diff --git a/@codexteam/ui/src/vue/components/card/CardSkeleton.vue b/@codexteam/ui/src/vue/components/card/CardSkeleton.vue
index ded73313..74995e56 100644
--- a/@codexteam/ui/src/vue/components/card/CardSkeleton.vue
+++ b/@codexteam/ui/src/vue/components/card/CardSkeleton.vue
@@ -74,8 +74,8 @@ withDefaults(
     box-sizing: border-box;
 
     .card-skeleton__cover {
-      width: 150px;
-      height: 100px;
+      width: var(--size-cover);
+      aspect-ratio: 3 / 2;
     }
   }
 
@@ -126,13 +126,12 @@ withDefaults(
     animation: skeleton-animation 3s infinite linear;
   }
 
-  @media (max-width: 768px) {
+  @media (--mobile) {
     &--horizontal {
       gap: var(--spacing-ml);
 
       .card-skeleton__cover {
-        width: 96px;
-        height: 64px;
+        width: var(--size-cover-small);
       }
     }
   }
diff --git a/@codexteam/ui/src/vue/components/editor/Editor.vue b/@codexteam/ui/src/vue/components/editor/Editor.vue
index e746f219..b6b16c3e 100644
--- a/@codexteam/ui/src/vue/components/editor/Editor.vue
+++ b/@codexteam/ui/src/vue/components/editor/Editor.vue
@@ -199,10 +199,10 @@ defineExpose({
     }
   }
 
-  @media (max-width: 768px) {
+  @media (--mobile) {
     .cdx-search-field__input,
     .ce-inline-tool-input {
-      font-size: 16px;
+      font-size: var(--font-size-field-mobile);
     }
   }
 
diff --git a/@codexteam/ui/src/vue/components/input/Input.vue b/@codexteam/ui/src/vue/components/input/Input.vue
index 0e27e196..c01b55b5 100644
--- a/@codexteam/ui/src/vue/components/input/Input.vue
+++ b/@codexteam/ui/src/vue/components/input/Input.vue
@@ -102,8 +102,8 @@ onMounted(() => {
   padding: var(--v-padding) var(--h-padding);
   border-radius: var(--radius-field);
 
-  @media (max-width: 768px) {
-    font-size: 16px;
+  @media (--mobile) {
+    font-size: var(--font-size-field-mobile);
   }
 }
 </style>
diff --git a/@codexteam/ui/src/vue/components/popup/Popup.vue b/@codexteam/ui/src/vue/components/popup/Popup.vue
index 8245b7c1..fcf198bc 100644
--- a/@codexteam/ui/src/vue/components/popup/Popup.vue
+++ b/@codexteam/ui/src/vue/components/popup/Popup.vue
@@ -95,7 +95,7 @@ withDefaults(
     }
   }
 
-  @media (max-width: 768px) {
+  @media (--mobile) {
     grid-template-columns: minmax(0, 1fr);
     justify-items: center;
     padding: var(--spacing-ml);
diff --git a/@codexteam/ui/src/vue/components/row/Row.vue b/@codexteam/ui/src/vue/components/row/Row.vue
index 54735481..0e6b031b 100644
--- a/@codexteam/ui/src/vue/components/row/Row.vue
+++ b/@codexteam/ui/src/vue/components/row/Row.vue
@@ -114,13 +114,13 @@ defineProps<{
     align-items: center;
   }
 
-  @media (max-width: 768px) {
+  @media (--mobile) {
     &__body-inner {
       flex-wrap: wrap;
     }
 
     &__center {
-      flex-basis: 8rem;
+      flex-basis: var(--size-text-min);
     }
 
     &__right {
diff --git a/@codexteam/ui/src/vue/components/tabbar/Tab.vue b/@codexteam/ui/src/vue/components/tabbar/Tab.vue
index 2533f28b..17d191c9 100644
--- a/@codexteam/ui/src/vue/components/tabbar/Tab.vue
+++ b/@codexteam/ui/src/vue/components/tabbar/Tab.vue
@@ -66,9 +66,6 @@ const props = withDefaults(
 
 const tabElement = ref<HTMLElement | null>(null);
 
-/**
- * Keeps the active tab visible when the tabbar is scrolled horizontally
- */
 function scrollIntoViewIfActive(): void {
   if (props.isActive) {
     tabElement.value?.scrollIntoView({
@@ -167,8 +164,8 @@ watch(() => props.isActive, scrollIntoViewIfActive, { flush: 'post' });
     }
   }
 
-  @media (max-width: 768px) {
-    --tab-text-max-width: 120px;
+  @media (--mobile) {
+    --tab-text-max-width: var(--size-text-min);
 
     &__body-image + &__body-text {
       display: none;
diff --git a/@codexteam/ui/src/vue/components/vertical-menu/VerticalMenu.vue b/@codexteam/ui/src/vue/components/vertical-menu/VerticalMenu.vue
index 4e47dfab..315d08dd 100644
--- a/@codexteam/ui/src/vue/components/vertical-menu/VerticalMenu.vue
+++ b/@codexteam/ui/src/vue/components/vertical-menu/VerticalMenu.vue
@@ -30,7 +30,7 @@ defineProps<{
   background-color: var(--base--bg-secondary);
   width: max-content;
 
-  @media (max-width: 768px) {
+  @media (--mobile) {
     width: auto;
   }
 }
diff --git a/@codexteam/ui/src/vue/composables/useViewport/index.ts b/@codexteam/ui/src/vue/composables/useViewport/index.ts
new file mode 100644
index 00000000..ef00cd1b
--- /dev/null
+++ b/@codexteam/ui/src/vue/composables/useViewport/index.ts
@@ -0,0 +1,8 @@
+import { createSharedComposable, useMediaQuery } from '@vueuse/core';
+
+// Keep in sync with --mobile in styles/breakpoints.pcss
+const MOBILE_MEDIA_QUERY = '(max-width: 768px)';
+
+export const useViewport = createSharedComposable(() => ({
+  isMobile: useMediaQuery(MOBILE_MEDIA_QUERY),
+}));
diff --git a/@codexteam/ui/src/vue/index.ts b/@codexteam/ui/src/vue/index.ts
index 4cd7c227..37f0c6b0 100644
--- a/@codexteam/ui/src/vue/index.ts
+++ b/@codexteam/ui/src/vue/index.ts
@@ -19,6 +19,7 @@ export * from './components/popover';
 export * from './components/popup';
 export * from './components/confirm';
 export * from './composables/useTheme';
+export * from './composables/useViewport';
 export * from './components/checkbox';
 export * from './components/select';
 export * from './components/chart';
diff --git a/@codexteam/ui/src/vue/layout/navbar/Navbar.vue b/@codexteam/ui/src/vue/layout/navbar/Navbar.vue
index 54127e6b..3a4212d8 100644
--- a/@codexteam/ui/src/vue/layout/navbar/Navbar.vue
+++ b/@codexteam/ui/src/vue/layout/navbar/Navbar.vue
@@ -27,7 +27,7 @@
       margin-left: auto;
   }
 
-  @media (max-width: 768px) {
+  @media (--mobile) {
     padding: var(--spacing-ms) var(--spacing-m);
   }
 }
diff --git a/@codexteam/ui/src/vue/layout/page-block/PageBlock.vue b/@codexteam/ui/src/vue/layout/page-block/PageBlock.vue
index b155cd91..1b07029a 100644
--- a/@codexteam/ui/src/vue/layout/page-block/PageBlock.vue
+++ b/@codexteam/ui/src/vue/layout/page-block/PageBlock.vue
@@ -80,13 +80,13 @@ defineProps({
   }
 }
 
-@media (max-width: 1300px) {
+@media (--narrow) {
   .page-block__sidebar:empty {
     display: none;
   }
 }
 
-@media (max-width: 768px) {
+@media (--mobile) {
   .page-block {
     flex-direction: column;
   }
diff --git a/package.json b/package.json
index 4d005a77..0aad1ab5 100644
--- a/package.json
+++ b/package.json
@@ -36,6 +36,7 @@
     "vue-router": "^4.2.4"
   },
   "devDependencies": {
+    "@csstools/postcss-global-data": "^2.1.1",
     "@eslint/eslintrc": "^3.1.0",
     "@eslint/js": "^9.3.0",
     "@hawk.so/vite-plugin": "^1.0.2",
diff --git a/postcss.config.js b/postcss.config.js
index 6f1ee2c6..025beb13 100644
--- a/postcss.config.js
+++ b/postcss.config.js
@@ -1,3 +1,5 @@
+import { fileURLToPath } from 'url';
+import postcssGlobalData from '@csstools/postcss-global-data';
 import postcssNested from 'postcss-nested';
 import postcssPresetEnv from 'postcss-preset-env';
 import postcssApply from 'postcss-apply';
@@ -10,6 +12,12 @@ import postcssHoverMediaFeature from 'postcss-hover-media-feature';
  */
 export default function () {
   return {
-    plugins: [postcssNested(), postcssPresetEnv(), postcssApply(), postcssHoverMediaFeature()],
+    plugins: [
+      postcssGlobalData({ files: [fileURLToPath(new URL('./@codexteam/ui/src/styles/breakpoints.pcss', import.meta.url))] }),
+      postcssNested(),
+      postcssPresetEnv(),
+      postcssApply(),
+      postcssHoverMediaFeature(),
+    ],
   };
 }
diff --git a/src/presentation/components/note-header/NoteHeader.vue b/src/presentation/components/note-header/NoteHeader.vue
index 631ba6e6..48b570c8 100644
--- a/src/presentation/components/note-header/NoteHeader.vue
+++ b/src/presentation/components/note-header/NoteHeader.vue
@@ -33,7 +33,7 @@
     min-width: 0;
     color: var(--base--text-secondary);
 
-    @media (max-width: 768px) {
+    @media (--mobile) {
       overflow-x: auto;
       white-space: nowrap;
       scrollbar-width: none;
diff --git a/src/presentation/components/note-list/NoteList.vue b/src/presentation/components/note-list/NoteList.vue
index 5182e6e4..23e44fcf 100644
--- a/src/presentation/components/note-list/NoteList.vue
+++ b/src/presentation/components/note-list/NoteList.vue
@@ -93,13 +93,13 @@ function getSubtitle(note: Note): string | undefined {
   display: grid;
   width: 100%;
   box-sizing: border-box;
-  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
+  grid-template-columns: repeat(auto-fill, minmax(var(--layout-note-card-min-width), 1fr));
 
   > a {
     display: flex;
   }
 
-  @media (max-width: 768px) {
+  @media (--mobile) {
     --v-padding: var(--spacing-s);
     --h-padding: var(--spacing-s);
 
diff --git a/src/presentation/pages/Note.vue b/src/presentation/pages/Note.vue
index 139d9887..f2c839b9 100644
--- a/src/presentation/pages/Note.vue
+++ b/src/presentation/pages/Note.vue
@@ -73,8 +73,7 @@
 
 <script lang="ts" setup>
 import { computed, ref, toRef, watch } from 'vue';
-import { useMediaQuery } from '@vueuse/core';
-import { Button, Editor, PageBlock, VerticalMenu, type VerticalMenuItem } from '@codexteam/ui/vue';
+import { Button, Editor, PageBlock, VerticalMenu, useViewport, type VerticalMenuItem } from '@codexteam/ui/vue';
 import useNote from '@/application/services/useNote';
 import { useRoute, useRouter } from 'vue-router';
 import { NoteContent } from '@/domain/entities/Note';
@@ -108,10 +107,7 @@ const props = defineProps<{
 
 const noteId = toRef(props, 'id');
 
-/**
- * On mobile the note hierarchy goes below the note instead of the sidebar, and only when the note has relatives
- */
-const isMobile = useMediaQuery('(max-width: 768px)');
+const { isMobile } = useViewport();
 
 const { note, noteTools, save, noteTitle, canEdit, noteParents, noteHierarchy } = useNote({
   id: noteId,
@@ -255,7 +251,7 @@ watch(noteTitle, () => {
   padding-right: var(--h-padding);
 }
 
-@media (max-width: 768px) {
+@media (--mobile) {
   .last_edit {
     display: none;
   }
diff --git a/src/presentation/pages/NoteSettings.vue b/src/presentation/pages/NoteSettings.vue
index dec71f94..5daab199 100644
--- a/src/presentation/pages/NoteSettings.vue
+++ b/src/presentation/pages/NoteSettings.vue
@@ -257,7 +257,7 @@ async function handleTeamMemberRemoved(userId: TeamMember['user']['id']) {
     color: var(--text-secondary);
   }
 
-  @media (max-width: 768px) {
+  @media (--mobile) {
     margin: 0;
   }
 }
diff --git a/src/presentation/styles/sizes.pcss b/src/presentation/styles/sizes.pcss
index d9cb2526..7e9f77e8 100644
--- a/src/presentation/styles/sizes.pcss
+++ b/src/presentation/styles/sizes.pcss
@@ -5,4 +5,5 @@
   --layout-content-width: 700px;
   --layout-tab-max-width: 200px;
   --layout-header-avatar: 32px;
+  --layout-note-card-min-width: 160px;
 }
diff --git a/yarn.lock b/yarn.lock
index 986d68b8..175acea0 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -122,6 +122,7 @@ __metadata:
   resolution: "@codexteam/ui@workspace:@codexteam/ui"
   dependencies:
     "@codexteam/icons": ^0.3.3
+    "@csstools/postcss-global-data": ^2.1.1
     "@editorjs/editorjs": 2.30.2
     "@editorjs/header": ^2.8.6
     "@editorjs/nested-list": ^1.4.2
@@ -293,6 +294,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@csstools/postcss-global-data@npm:^2.1.1":
+  version: 2.1.1
+  resolution: "@csstools/postcss-global-data@npm:2.1.1"
+  peerDependencies:
+    postcss: ^8.4
+  checksum: 8330c831d3da5b83ba1b91bfc5bf66ac87aa7736891330a747d2cab4b7cb64a2fe9528c34500e62846edc3453cd94398a66b4542891cb99d37349c7acece12cf
+  languageName: node
+  linkType: hard
+
 "@csstools/postcss-gradients-interpolation-method@npm:^4.0.17":
   version: 4.0.17
   resolution: "@csstools/postcss-gradients-interpolation-method@npm:4.0.17"
@@ -4867,6 +4877,7 @@ __metadata:
   dependencies:
     "@codexteam/icons": ^0.3.3
     "@codexteam/ui": "workspace:^"
+    "@csstools/postcss-global-data": ^2.1.1
     "@eslint/eslintrc": ^3.1.0
     "@eslint/js": ^9.3.0
     "@hawk.so/javascript": ^3.2.1

From a8b4f62e05fa6d845c25d47e3fc8023d650b9bd3 Mon Sep 17 00:00:00 2001
From: Kuchizu <legolashacker0@gmail.com>
Date: Sun, 4 Oct 2026 02:22:23 +0300
Subject: [PATCH 3/3] Override cover size on mobile in dimensions and rename
 text min width token

---
 @codexteam/ui/src/styles/dimensions.pcss               | 9 +++++++--
 @codexteam/ui/src/vue/components/card/Card.vue         | 4 ----
 @codexteam/ui/src/vue/components/card/CardSkeleton.vue | 4 ----
 @codexteam/ui/src/vue/components/row/Row.vue           | 2 +-
 @codexteam/ui/src/vue/components/tabbar/Tab.vue        | 2 +-
 5 files changed, 9 insertions(+), 12 deletions(-)

diff --git a/@codexteam/ui/src/styles/dimensions.pcss b/@codexteam/ui/src/styles/dimensions.pcss
index bdc73c0a..07c60d9a 100644
--- a/@codexteam/ui/src/styles/dimensions.pcss
+++ b/@codexteam/ui/src/styles/dimensions.pcss
@@ -19,8 +19,6 @@
   --size-icon: 20px;
   --size-avatar: 30px;
   --size-cover: 150px;
-  --size-cover-small: 96px;
-  --size-text-min: 120px;
 
   /**
    * Layout
@@ -28,6 +26,7 @@
   --layout-content-width: 700px;
   --layout-sidebar-width: 300px;
   --layout-navbar-height: 51px;
+  --layout-text-width-min: 120px;
 
   /**
    * Height of the line between list items
@@ -51,6 +50,12 @@
   --radius-field: var(--radius-m);
 }
 
+@media (--mobile) {
+  :root {
+    --size-cover: 96px;
+  }
+}
+
 [data-dimensions="small"] {
   --v-padding: var(--spacing-xs);
   --h-padding: var(--spacing-ms);
diff --git a/@codexteam/ui/src/vue/components/card/Card.vue b/@codexteam/ui/src/vue/components/card/Card.vue
index 24345d15..37caab26 100644
--- a/@codexteam/ui/src/vue/components/card/Card.vue
+++ b/@codexteam/ui/src/vue/components/card/Card.vue
@@ -159,10 +159,6 @@ withDefaults(
       flex-wrap: wrap;
       gap: var(--spacing-ml);
 
-      .card__cover {
-        width: var(--size-cover-small);
-      }
-
       .card__body {
         min-width: 0;
       }
diff --git a/@codexteam/ui/src/vue/components/card/CardSkeleton.vue b/@codexteam/ui/src/vue/components/card/CardSkeleton.vue
index 74995e56..82577fb0 100644
--- a/@codexteam/ui/src/vue/components/card/CardSkeleton.vue
+++ b/@codexteam/ui/src/vue/components/card/CardSkeleton.vue
@@ -129,10 +129,6 @@ withDefaults(
   @media (--mobile) {
     &--horizontal {
       gap: var(--spacing-ml);
-
-      .card-skeleton__cover {
-        width: var(--size-cover-small);
-      }
     }
   }
 }
diff --git a/@codexteam/ui/src/vue/components/row/Row.vue b/@codexteam/ui/src/vue/components/row/Row.vue
index 0e6b031b..f02517ae 100644
--- a/@codexteam/ui/src/vue/components/row/Row.vue
+++ b/@codexteam/ui/src/vue/components/row/Row.vue
@@ -120,7 +120,7 @@ defineProps<{
     }
 
     &__center {
-      flex-basis: var(--size-text-min);
+      flex-basis: var(--layout-text-width-min);
     }
 
     &__right {
diff --git a/@codexteam/ui/src/vue/components/tabbar/Tab.vue b/@codexteam/ui/src/vue/components/tabbar/Tab.vue
index 17d191c9..439f6d25 100644
--- a/@codexteam/ui/src/vue/components/tabbar/Tab.vue
+++ b/@codexteam/ui/src/vue/components/tabbar/Tab.vue
@@ -165,7 +165,7 @@ watch(() => props.isActive, scrollIntoViewIfActive, { flush: 'post' });
   }
 
   @media (--mobile) {
-    --tab-text-max-width: var(--size-text-min);
+    --tab-text-max-width: var(--layout-text-width-min);
 
     &__body-image + &__body-text {
       display: none;