Update landscape breakpoint to 450px and refine component layouts

- the button should not overlap border bottom
- in landscape, middle column should have margin right: -10px;
- rename 'is landscape' mixin to 'landscape'
- move [Fragment] into top level const

├── apps
│   └── editor
│       └── src
│           └── views
│               └── prompt
│                   └── frontend
│                       ├── Main
│                       │   └── MainView
│                       │       ├── MainView.module.scss
│                       │       ├── MainView.tsx
│                       │       └── components
│                       │           └── Header
│                       │               └── Header.module.scss
│                       └── hooks
│                           └── use-is-landscape.ts
└── packages
    └── ui
        └── src
            ├── components
            │   └── editor
            │       └── prompt
            │           └── Tabs
            │               ├── Tabs.module.scss
            │               ├── Tabs.tsx
            │               └── index.ts
            └── styles
                └── foundation
                    └── _mixins.scss

Author: robertpiosik

apps/editor/src/views/prompt/frontend/Main/MainView/MainView.module.scss

@@ -18,7 +18,7 @@
     flex-shrink: 0;
   }
 
-  @include is-landscape {
+  @include landscape {
     height: auto;
   }
 }
@@ -41,6 +41,9 @@
 
     &--prompt {
       flex: 1.5;
+      @include modern-ui {
+        margin-right: -10px;
+      }
 
       .content {
         padding-bottom: 8px;

apps/editor/src/views/prompt/frontend/Main/MainView/components/Header/Header.module.scss

@@ -11,14 +11,15 @@
     padding: 0 10px;
   }
 
-  @include is-landscape {
+  @include landscape {
     height: auto;
     align-items: flex-start;
     padding: unset;
-    margin: 12px 0 0 12px;
+    margin: 6px 0 0 12px;
 
     @include modern-ui {
-      margin: 10px 0 0 10px;
+      padding: unset;
+      margin: 6px 0 0 10px;
     }
   }
 
@@ -28,7 +29,7 @@
     padding: 4px 0;
     gap: 4px;
 
-    @include is-landscape {
+    @include landscape {
       flex-direction: column;
       align-items: flex-start;
       padding: 0;

apps/editor/src/views/prompt/frontend/hooks/use-is-landscape.ts

@@ -1,14 +1,16 @@
 import { useState, useEffect } from 'react'
 
+const MIN_WIDTH = 450
+
 export const use_is_landscape = () => {
   const [is_landscape, set_is_landscape] = useState(
-    window.innerWidth > window.innerHeight && window.innerWidth >= 400
+    window.innerWidth > window.innerHeight && window.innerWidth >= MIN_WIDTH
   )
 
   useEffect(() => {
     const handle_resize = () => {
       set_is_landscape(
-        window.innerWidth > window.innerHeight && window.innerWidth >= 400
+        window.innerWidth > window.innerHeight && window.innerWidth >= MIN_WIDTH
       )
     }
 

packages/ui/src/components/editor/prompt/Tabs/Tabs.module.scss

@@ -3,24 +3,24 @@
   justify-content: space-between;
   align-items: center;
   gap: 14px;
-  margin: 0 12px;
+  padding: 0 12px;
   border-bottom: 1px solid var(--cwc-red-background);
 
   @include modern-ui {
+    padding: 0;
     margin: 0 10px;
   }
 
   &__list {
     display: flex;
     align-items: center;
     gap: 4px;
-    margin-bottom: -1px;
   }
 
   &__tab {
     @include accent-font;
     font-size: 16px;
-    padding: 4px 8px 3px 8px;
+    padding: 4px 8px 2px 8px;
     display: flex;
     align-items: center;
     text-transform: none;
@@ -35,14 +35,8 @@
       color: var(--cwc-text-color);
     }
 
-    &:focus-visible {
-      outline: 1px solid var(--vscode-focusBorder);
-      outline-offset: -1px;
-    }
-
     &--active {
       color: var(--cwc-red-foreground);
-      border-bottom-color: var(--cwc-red-background);
       background-color: var(--cwc-red-background);
 
       &:hover {

packages/ui/src/styles/foundation/_mixins.scss

@@ -10,8 +10,8 @@
   }
 }
 
-@mixin is-landscape {
-  @media (orientation: landscape) and (min-width: 400px) {
+@mixin landscape {
+  @media (orientation: landscape) and (min-width: 450px) {
     @content;
   }
 }