Implement multi-column landscape layout support for the main view

- create a mixin 'is-landscape'
- in landscape, should display header, prompt field and configurations in separate scrollable columns. You should a new hook 'use is landscape' in `apps/editor/src/views/prompt/frontend/hooks`
- is landscape should also check if minimum 400px width
- the column with configurations should have left dimmed border but only in landscape and not modern.
- use BEM convention
- in landscape, header elements should be stacked vertically
- in landscape, left column should be only 80px wide
- in landscape, header should have only top and left paddings
- in landscape, left column should take as little space as its content requires
- middle column should have flex: 1.5
- [Fragment] these should apply inside scollable
- main view content seem unnecessary in landscape
- for some reason 'auto' in [Fragment] causes jank on initial load. It has something to do with compacting.
- [Pasted text] should not compact in landscape

├── apps
│   └── editor
│       └── src
│           └── views
│               └── prompt
│                   └── frontend
│                       ├── Home
│                       │   ├── Home.module.scss
│                       │   ├── Home.tsx
│                       │   ├── hooks
│                       │   │   ├── use-has-scrolled-past-mode-button.ts
│                       │   │   ├── use-keyboard-shortcuts.ts
│                       │   │   └── use-tasks.ts
│                       │   └── index.ts
│                       ├── Main
│                       │   └── MainView
│                       │       ├── MainView.module.scss
│                       │       ├── MainView.tsx
│                       │       ├── components
│                       │       │   └── Header
│                       │       │       ├── Header.module.scss
│                       │       │       ├── Header.tsx
│                       │       │       └── index.ts
│                       │       └── hooks
│                       │           ├── use-invocation-counts.ts
│                       │           ├── use-keyboard-shortcuts.ts
│                       │           ├── use-last-choice-tooltip.ts
│                       │           └── use-re-render-on-interval.ts
│                       └── hooks
│                           ├── use-editor-sync.ts
│                           └── use-is-landscape.ts
└── packages
    └── ui
        └── src
            ├── components
            │   └── editor
            │       └── prompt
            │           └── CompactableActionButton
            │               ├── CompactableActionButton.module.scss
            │               └── CompactableActionButton.tsx
            └── styles
                └── foundation
                    ├── _colors.scss
                    ├── _index.scss
                    ├── _mixins.scss
                    └── _variables.scss

Author: robertpiosik

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

@@ -17,4 +17,46 @@
   > * {
     flex-shrink: 0;
   }
+
+  @include is-landscape {
+    height: auto;
+  }
+}
+
+.landscape {
+  display: flex;
+  height: 100%;
+  width: 100%;
+
+  &__column {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    min-width: 0;
+
+    &--header {
+      flex: 0 0 max-content;
+    }
+
+    &--prompt {
+      flex: 1.5;
+
+      .content {
+        padding-bottom: 8px;
+
+        @include modern-ui {
+          padding-bottom: 6px;
+        }
+      }
+    }
+
+    &--configurations {
+      border-left: 1px solid var(--cwc-border-color-dimmed);
+
+      @include modern-ui {
+        border-left: none;
+      }
+    }
+  }
 }