Adapt layout for mobile and tablet screens

@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",

@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(),
+    ],
   };
 }

@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);

@codexteam/ui/src/styles/dimensions.pcss

@@ -18,13 +18,15 @@
    */
   --size-icon: 20px;
   --size-avatar: 30px;
+  --size-cover: 150px;
 
   /**
    * Layout
    */
   --layout-content-width: 700px;
   --layout-sidebar-width: 300px;
   --layout-navbar-height: 51px;
+  --layout-text-width-min: 120px;
 
   /**
    * Height of the line between list items
@@ -48,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);

@codexteam/ui/src/styles/typography.pcss

@@ -27,12 +27,15 @@
    */
   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.
    */
   --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 +44,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 {

@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>
 
@@ -79,8 +84,6 @@ withDefaults(
 
 <style module lang="postcss">
 .card {
-  --card-width: 222px;
-
   display: flex;
   flex-direction: column;
   align-items: flex-start;
@@ -97,8 +100,8 @@ withDefaults(
     box-sizing: border-box;
 
     .card__cover {
-      width: 150px;
-      height: 100px;
+      width: var(--size-cover);
+      aspect-ratio: 3 / 2;
     }
   }
 
@@ -111,7 +114,7 @@ withDefaults(
   }
 
   &--vertical {
-    width: var(--card-width);
+    width: var(--card-width, 222px);
   }
 
   &__body {
@@ -142,6 +145,30 @@ withDefaults(
   &__title {
     color: var(--base--text);
   }
+
+  &__actions {
+    display: flex;
+
+    &:empty {
+      display: none;
+    }
+  }
+
+  @media (--mobile) {
+    &--horizontal {
+      flex-wrap: wrap;
+      gap: var(--spacing-ml);
+
+      .card__body {
+        min-width: 0;
+      }
+
+      .card__actions {
+        flex-basis: 100%;
+        flex-direction: column;
+      }
+    }
+  }
 }
 
 @keyframes card-skeleton-animation {

@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;
@@ -76,8 +74,8 @@ withDefaults(
     box-sizing: border-box;
 
     .card-skeleton__cover {
-      width: 150px;
-      height: 100px;
+      width: var(--size-cover);
+      aspect-ratio: 3 / 2;
     }
   }
 
@@ -104,7 +102,7 @@ withDefaults(
   }
 
   &--vertical {
-    width: var(--card-width);
+    width: var(--card-width, 222px);
   }
 
   &__cover {
@@ -127,6 +125,12 @@ withDefaults(
     background-size: 200% 100%;
     animation: skeleton-animation 3s infinite linear;
   }
+
+  @media (--mobile) {
+    &--horizontal {
+      gap: var(--spacing-ml);
+    }
+  }
 }
 
 @keyframes skeleton-animation {

@codexteam/ui/src/vue/components/editor/Editor.vue

@@ -199,6 +199,13 @@ defineExpose({
     }
   }
 
+  @media (--mobile) {
+    .cdx-search-field__input,
+    .ce-inline-tool-input {
+      font-size: var(--font-size-field-mobile);
+    }
+  }
+
   .ce-popover__nothing-found-message {
     color: var(--base--text-secondary);
   }

@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 (--mobile) {
+    font-size: var(--font-size-field-mobile);
+  }
 }
 </style>

@codexteam/ui/src/vue/components/popup/Popup.vue

@@ -94,6 +94,27 @@ withDefaults(
       color: var(--base--text);
     }
   }
+
+  @media (--mobile) {
+    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>

@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 (--mobile) {
+    &__body-inner {
+      flex-wrap: wrap;
+    }
+
+    &__center {
+      flex-basis: var(--layout-text-width-min);
+    }
+
+    &__right {
+      margin-left: auto;
+    }
+  }
 }
 </style>

@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,20 @@ withDefaults(
     closable: false,
   }
 );
+
+const tabElement = ref<HTMLElement | null>(null);
+
+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 +163,13 @@ withDefaults(
       border-radius: var(--radius-s) var(--radius-s) 0 0;
     }
   }
+
+  @media (--mobile) {
+    --tab-text-max-width: var(--layout-text-width-min);
+
+    &__body-image + &__body-text {
+      display: none;
+    }
+  }
 }
 </style>

@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 (--mobile) {
+    width: auto;
+  }
 }
 </style>

@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),
+}));

@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';

@codexteam/ui/src/vue/layout/navbar/Navbar.vue

@@ -26,5 +26,9 @@
   &__right {
       margin-left: auto;
   }
+
+  @media (--mobile) {
+    padding: var(--spacing-ms) var(--spacing-m);
+  }
 }
 </style>

@codexteam/ui/src/vue/layout/page-block/PageBlock.vue

@@ -79,4 +79,26 @@ defineProps({
     padding: var(--spacing-xxl) var(--spacing-ml);
   }
 }
+
+@media (--narrow) {
+  .page-block__sidebar:empty {
+    display: none;
+  }
+}
+
+@media (--mobile) {
+  .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>