fix: ui review fixes

Author: qradle-yndx

playground/src/app/components/C9RComponent.scss

@@ -3,6 +3,7 @@ $block: '.c9r-component';
 #{$block} {
     width: 100%;
     padding: 16px 12px;
+    box-sizing: border-box;
 
     &__header {
         display: flex;

src/editor-v2/components/DynamicForm/FieldBase/FieldBase.scss

@@ -6,7 +6,6 @@ $block: '.#{$ns}field-base';
 #{$block} {
     $class: &;
     padding: 16px 12px 16px 0;
-    border-bottom: 1px solid var(--g-color-line-generic);
 
     position: relative;
     display: flex;

src/editor-v2/components/Tabs/Tabs.scss

@@ -14,6 +14,9 @@ $block: '.#{$ns}tabs';
         font-weight: 500;
         letter-spacing: 0.5px;
         cursor: pointer;
+        font-size: var(--g-text-code-inline-1-font-size);
+        line-height: var(--g-text-code-inline-2-line-height);
+        align-items: center;
 
         &_active {
             pointer-events: none;
@@ -26,15 +29,35 @@ $block: '.#{$ns}tabs';
         border-bottom: 1px solid var(--g-color-line-generic);
         display: inline-flex;
         flex-direction: row;
-        padding: 16px 4px;
+        padding: 12px 4px;
         flex: 0 0 auto;
         box-sizing: border-box;
         overflow-x: auto;
+        position: sticky;
+        top: 0;
+        background-color: var(--g-color-base-background);
+        /* This ensures the background is visible when sticky */
+        z-index: 2;
+        /* Higher z-index for parent tabs-wrapper */
+    }
+
+    /* Make sure any nested tabs component also has proper overflow behavior */
+    #{$block} {
+        overflow: visible;
+
+        /* Ensure nested tabs-wrapper elements are also sticky but positioned below parent tabs-wrapper */
+        /* This selector specifically targets tabs-wrapper elements inside a nested tabs component */
+        #{$block} &__tabs-wrapper {
+            position: sticky;
+            top: 48.5px;
+            /* Position below parent tabs-wrapper */
+            z-index: 1;
+            background-color: var(--g-color-base-background);
+        }
     }
 
     &__body {
         flex: 1;
         min-height: 1px;
-        overflow-y: auto;
     }
 }

src/editor-v2/containers/BlockConfigForm/BlockConfigForm.scss

@@ -9,7 +9,6 @@ $padding: 12px;
     &__title {
         @include text-subheader-3;
         padding: $padding;
-        border-bottom: 1px solid var(--g-color-line-generic);
     }
 
     &__form {

src/editor-v2/containers/BlocksList/BlocksList.scss

@@ -21,6 +21,7 @@ $block: '.#{$ns}blocks-list';
         justify-content: space-between;
         text-align: center;
         gap: 4px;
+        max-width: 192px;
 
         &:active {
             background-color: var(--g-color-base-generic-hover);
@@ -57,7 +58,7 @@ $block: '.#{$ns}blocks-list';
 
         &-items {
             display: grid;
-            grid-template-columns: 1fr 1fr;
+            grid-template-columns: repeat(auto-fill, minmax(98px, 1fr));
             gap: 8px;
         }
     }

src/editor-v2/containers/GlobalConfig/GlobalConfig.scss

@@ -8,6 +8,5 @@ $block: '.#{$ns}global-config';
         padding: 12px;
         margin-top: 8px;
         @include text-subheader-3;
-        border-bottom: 1px solid var(--g-color-line-generic);
     }
 }

src/editor-v2/containers/ViewSwitches/ViewSwitches.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import {Display, Eye, Minus, Plus, Smartphone} from '@gravity-ui/icons';
+import {Display, Minus, Plus, Smartphone, SquareDashed} from '@gravity-ui/icons';
 import {Button, Icon, SegmentedRadioGroup, Select} from '@gravity-ui/uikit';
 
 import {ZOOM_STEPS} from '../../constants';
@@ -26,7 +26,7 @@ interface DeviceOption {
  * Available device viewport options
  * - Desktop: 100% width
  * - Tablet: 768px width
- * - Mobile: 576px width
+ * - Mobile: 375px width
  */
 const DEVICE_OPTIONS: DeviceOption[] = [
     {
@@ -41,7 +41,7 @@ const DEVICE_OPTIONS: DeviceOption[] = [
     },
     {
         label: <Icon width={14} data={Smartphone} />,
-        value: '576px',
+        value: '375px',
         ariaLabel: 'Mobile view',
     },
 ];
@@ -101,7 +101,7 @@ const ViewSwitches: React.FC = () => {
                 aria-label="Switch to preview mode"
                 title="Switch to preview mode"
             >
-                <Icon data={Eye} />
+                <Icon data={SquareDashed} />
             </Button>
 
             <div className={b('zoom')} role="group" aria-label="Zoom controls">