From 24faabc20a89a5eef611ed8096f3c3769b88836f Mon Sep 17 00:00:00 2001
From: 3252a8 <3252a8@proton.me>
Date: Sun, 7 Jun 2026 23:35:53 +0300
Subject: [PATCH] fix: improve mobile tariff row editor layout

---
 frontend/src/styles/admin-controls.css | 23 +++++--
 frontend/src/styles/admin.css          | 84 +++++++++++++++++++++++++-
 2 files changed, 100 insertions(+), 7 deletions(-)

diff --git a/frontend/src/styles/admin-controls.css b/frontend/src/styles/admin-controls.css
index c1cc9ca..e8527b6 100644
--- a/frontend/src/styles/admin-controls.css
+++ b/frontend/src/styles/admin-controls.css
@@ -1,5 +1,3 @@
-
-
 .admin-toolbar-search .input,
 .admin-toolbar-search .admin-btn {
   height: 36px;
@@ -57,7 +55,9 @@
   padding: 0 12px;
   font-size: 13px;
   outline: none;
-  transition: border-color 0.12s ease, box-shadow 0.12s ease;
+  transition:
+    border-color 0.12s ease,
+    box-shadow 0.12s ease;
 }
 
 .admin-screen-wrap .admin-translations-search .input,
@@ -110,7 +110,10 @@
   font-weight: 500;
   cursor: pointer;
   white-space: nowrap;
-  transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
+  transition:
+    background 0.12s ease,
+    border-color 0.12s ease,
+    color 0.12s ease;
 }
 
 .admin-btn:hover:not(:disabled) {
@@ -239,7 +242,9 @@
   font-size: 13px;
   line-height: 1.45;
   outline: none;
-  transition: border-color 0.12s ease, box-shadow 0.12s ease;
+  transition:
+    border-color 0.12s ease,
+    box-shadow 0.12s ease;
 }
 
 .admin-setting-control .admin-setting-textarea:focus {
@@ -290,6 +295,14 @@
   padding: 0;
 }
 
+.admin-row-editor-line .input,
+.admin-row-editor-line input,
+.admin-row-editor-line select {
+  height: var(--admin-row-editor-action-size, 36px);
+  min-height: var(--admin-row-editor-action-size, 36px);
+  padding-block: 0;
+}
+
 .admin-action-grid > .admin-btn {
   width: 100%;
   height: 36px;
diff --git a/frontend/src/styles/admin.css b/frontend/src/styles/admin.css
index 2995903..dfeea82 100644
--- a/frontend/src/styles/admin.css
+++ b/frontend/src/styles/admin.css
@@ -1660,7 +1660,9 @@
   font-size: 13px;
   text-align: center;
   outline: none;
-  transition: border-color 0.12s ease, box-shadow 0.12s ease;
+  transition:
+    border-color 0.12s ease,
+    box-shadow 0.12s ease;
 }
 
 .admin-pagination-jump-input:focus {
@@ -3667,6 +3669,7 @@
   display: grid;
   gap: 8px;
   min-width: 0;
+  max-width: 100%;
 }
 
 .admin-row-editor-line {
@@ -3698,7 +3701,8 @@
 }
 
 .admin-row-editor-line.admin-row-editor-drag {
-  grid-template-columns: 24px minmax(90px, 1fr) minmax(110px, 1fr) minmax(110px, 1fr)
+  grid-template-columns:
+    24px minmax(90px, 1fr) minmax(110px, 1fr) minmax(110px, 1fr)
     var(--admin-row-editor-action-size);
 }
 
@@ -3910,6 +3914,59 @@
     font-size: 11px;
   }
 
+  .admin-tariff-dialog {
+    width: min(100%, calc(100vw - 24px));
+    gap: 12px;
+    padding: 14px;
+    border-radius: 18px;
+  }
+
+  .admin-tariff-dialog .dialog-head {
+    gap: 10px;
+  }
+
+  .admin-tariff-dialog .dialog-title-copy {
+    min-width: 0;
+  }
+
+  .admin-tariff-dialog .admin-tabs-list {
+    width: 100%;
+  }
+
+  .admin-tariff-dialog .admin-tabs-trigger {
+    flex: 0 0 auto;
+    padding-inline: 10px;
+  }
+
+  .admin-tariff-dialog .admin-tabs-content,
+  .admin-tariff-dialog .admin-editor-section,
+  .admin-tariff-dialog .admin-editor-section-title {
+    min-width: 0;
+  }
+
+  .admin-tariff-dialog .admin-editor-section {
+    padding: 10px;
+  }
+
+  .admin-tariff-dialog .admin-editor-section-head {
+    align-items: stretch;
+    gap: 10px;
+  }
+
+  .admin-tariff-dialog .admin-editor-section-head > .admin-editor-section-actions,
+  .admin-tariff-dialog .admin-editor-section-actions {
+    width: 100%;
+  }
+
+  .admin-tariff-dialog .admin-editor-section-actions .admin-btn {
+    width: 100%;
+    min-width: 0;
+  }
+
+  .admin-row-editor-line.admin-row-editor-header {
+    display: none;
+  }
+
   .admin-form-row.admin-form-row-3,
   .admin-row-editor-line,
   .admin-row-editor-line.admin-row-editor-4,
@@ -3917,6 +3974,27 @@
   .admin-row-editor-line.admin-row-editor-period,
   .admin-row-editor-line.admin-row-editor-drag {
     grid-template-columns: 1fr;
+    align-items: stretch;
+  }
+
+  .admin-row-editor-line:not(.admin-row-editor-header) {
+    padding: 10px;
+    border: 1px solid var(--admin-border);
+    border-radius: 8px;
+    background: color-mix(in srgb, var(--admin-surface-2) 58%, transparent);
+  }
+
+  .admin-row-editor-line .ui-sortable-handle.ui-sortable-handle {
+    width: 100%;
+    height: 28px;
+    min-height: 28px;
+    border: 1px dashed var(--admin-border);
+    border-radius: 7px;
+    background: color-mix(in srgb, var(--admin-muted) 8%, transparent);
+  }
+
+  .admin-row-editor-line .admin-btn {
+    justify-self: end;
   }
 
   .admin-dialog-actions {
@@ -3981,6 +4059,8 @@
   display: inline-flex;
   align-items: center;
   gap: 4px;
+  max-width: 100%;
+  min-width: 0;
   padding: 4px;
   border-radius: 10px;
   background: var(--admin-surface-2);