fix: OPTIC-1107: [timebox] visual inconsistency with datamanager on smaller screens

label_studio/templates/base.html

@@ -9,7 +9,7 @@
   <meta charset="utf-8"/>
   <meta name="author" content="Label Studio"/>
   <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
-  <meta name="viewport" content="width=device-width, initial-scale=0.9, shrink-to-fit=no">
+  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=yes">
 
   <!-- Address string color -->
   <meta name="theme-color" content="#272727"> <!-- Chrome, Firefox OS and Opera -->

web/apps/labelstudio/src/app/App.scss

@@ -9,6 +9,10 @@ body {
 
   margin: 0;
   font-family: Figtree, sans-serif;
+  display: flex;
+  :global(.login_page_new_ui), :global(.app-wrapper) {
+    flex: 1;
+  }
 }
 
 .app-wrapper {

web/apps/labelstudio/src/pages/Projects/Projects.scss

@@ -16,7 +16,7 @@
     box-sizing: border-box;
     grid-gap: 32px;
     grid-auto-rows: 1fr;
-    grid-template-columns: repeat(4, 1fr);
+    grid-template-columns: repeat(1, 1fr);
   }
 
   &__link {
@@ -41,6 +41,12 @@
     box-sizing: border-box;
   }
 
+  @media (width >= 780px) {
+    &__list {
+      grid-template-columns: repeat(2, 1fr);
+    }
+  }
+
   @media (width >= 1200px) {
     &__list {
       grid-template-columns: repeat(3, 1fr);

web/libs/datamanager/src/components/App/App.scss

@@ -4,17 +4,6 @@
   background-color: #f0f0f0;
 }
 
-.tab-panel {
-  display: flex;
-  padding: 12px 16px;
-  background-color: var(--sand_0);
-  justify-content: space-between;
-
-  &_newUI {
-    padding: 8px;
-  }
-}
-
 .grid {
   flex: 1;
 }

web/libs/datamanager/src/components/DataManager/Toolbar/TabPanel.scss

@@ -3,6 +3,7 @@
   padding: 12px 16px;
   background-color: var(--white);
   justify-content: space-between;
+  gap: 12px;
 
   &_newUI {
     padding: 8px;