Fix Editor page mobile responsiveness: toolbar wrapping, flexible widths, responsive drawer

Author: nickprotop

cloud/src/LrmCloud.Web/Components/TranslationGrid.razor

@@ -3,9 +3,9 @@
 @inject NotificationService NotificationService
 
 @* Toolbar *@
-<RadzenCard class="rz-mb-2 rz-p-2">
+<RadzenCard class="rz-mb-2 rz-p-2 translation-toolbar">
     <RadzenStack Orientation="Radzen.Orientation.Horizontal" AlignItems="Radzen.AlignItems.Center" Gap="0.5rem" Wrap="FlexWrap.Wrap">
-        <RadzenFormField Variant="Radzen.Variant.Outlined" Style="width: 250px;">
+        <RadzenFormField Variant="Radzen.Variant.Outlined" Style="flex: 1 1 200px; min-width: 150px; max-width: 300px;">
             <Start>
                 <RadzenIcon Icon="search" />
             </Start>
@@ -14,7 +14,7 @@
             </ChildContent>
         </RadzenFormField>
 
-        <RadzenFormField Text="Status" Variant="Radzen.Variant.Outlined" Style="width: 150px;">
+        <RadzenFormField Text="Status" Variant="Radzen.Variant.Outlined" Style="flex: 0 1 150px; min-width: 120px;">
             <ChildContent>
                 <RadzenDropDown TValue="TranslationStatus?" @bind-Value="_statusFilter" Change="@OnStatusFilterChanged"
                                 Data="@_statusOptions" TextProperty="Text" ValueProperty="Value"
@@ -24,7 +24,7 @@
 
         @if (WorkflowEnabled)
         {
-            <RadzenFormField Text="Workflow" Variant="Radzen.Variant.Outlined" Style="width: 150px;">
+            <RadzenFormField Text="Workflow" Variant="Radzen.Variant.Outlined" Style="flex: 0 1 150px; min-width: 120px;">
                 <ChildContent>
                     <RadzenDropDown TValue="string?" @bind-Value="_workflowStatusFilter" Change="@OnWorkflowFilterChanged"
                                     Data="@_workflowOptions" TextProperty="Text" ValueProperty="Value"

cloud/src/LrmCloud.Web/Pages/Projects/Editor.razor

@@ -72,8 +72,8 @@ else
         </RadzenStack>
     }
 
-    <div style="display: flex; gap: 1rem;">
-        <div style="@(_drawerOpen ? "flex: 1; min-width: 0;" : "flex: 1;")">
+    <div style="display: flex; flex-wrap: wrap; gap: 1rem;">
+        <div style="@(_drawerOpen ? "flex: 1 1 300px; min-width: 0;" : "flex: 1;")">
             <TranslationGrid @ref="_translationGrid"
                              ServerDataFunc="@LoadServerData"
                              Languages="@_languages"
@@ -94,7 +94,7 @@ else
 
         @if (_drawerOpen && _selectedRow != null)
         {
-            <RadzenCard Style="width: 400px; height: fit-content; flex-shrink: 0; position: sticky; top: 1rem;">
+            <RadzenCard class="editor-drawer">
                 <RadzenStack Gap="1rem">
                     <RadzenStack Orientation="Radzen.Orientation.Horizontal" JustifyContent="JustifyContent.SpaceBetween" AlignItems="Radzen.AlignItems.Center">
                         <RadzenText TextStyle="TextStyle.H6">Key Preview</RadzenText>

cloud/src/LrmCloud.Web/wwwroot/css/app.css

@@ -1490,3 +1490,63 @@ ul.rz-profile-menu > li > ul.rz-navigation-menu {
     }
 }
 
+/* =============================================================================
+   Editor Page Responsive
+   ============================================================================= */
+
+/* Editor drawer - desktop */
+.editor-drawer {
+    width: 400px;
+    height: fit-content;
+    flex-shrink: 0;
+    position: sticky;
+    top: 1rem;
+}
+
+/* Editor drawer - tablet */
+@media (max-width: 991px) {
+    .editor-drawer {
+        width: 320px;
+    }
+}
+
+/* Editor drawer - mobile */
+@media (max-width: 768px) {
+    .editor-drawer {
+        width: 100%;
+        flex: 1 1 100%;
+        position: static;
+        order: -1;
+    }
+}
+
+/* Translation toolbar responsive */
+.translation-toolbar .rz-stack {
+    row-gap: 0.5rem;
+}
+
+@media (max-width: 599px) {
+    .translation-toolbar .rz-form-field {
+        flex: 1 1 100% !important;
+        min-width: 100% !important;
+        max-width: 100% !important;
+    }
+
+    .translation-toolbar .rz-button {
+        flex: 1 1 auto;
+        min-width: 44px;
+        padding-left: 0.5rem;
+        padding-right: 0.5rem;
+    }
+
+    /* Hide button text on very small screens */
+    .translation-toolbar .rz-button .rz-button-text {
+        display: none;
+    }
+
+    /* Ensure split button also responsive */
+    .translation-toolbar .rz-splitbutton {
+        flex: 0 0 auto;
+    }
+}
+