Skip to content

Commit 8c08a93

Browse files
nickprotopnickprotop
committed
Fix mobile responsiveness: wrap page headers and search/filter rows on small screens
1 parent 60b6d87 commit 8c08a93

5 files changed

Lines changed: 115 additions & 15 deletions

File tree

‎cloud/src/LrmCloud.Web/Pages/Home.razor‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@
1515

1616
<PageTitle>Dashboard - LRM Cloud</PageTitle>
1717

18-
<RadzenStack Orientation="Radzen.Orientation.Horizontal" JustifyContent="JustifyContent.SpaceBetween" AlignItems="Radzen.AlignItems.Center" class="rz-mb-4">
18+
<RadzenStack Orientation="Radzen.Orientation.Horizontal" JustifyContent="JustifyContent.SpaceBetween" AlignItems="Radzen.AlignItems.Center" Wrap="FlexWrap.Wrap" Gap="0.5rem" class="rz-mb-4">
1919
<RadzenText TextStyle="TextStyle.H4" Style="margin: 0;">Dashboard</RadzenText>
2020
<RadzenStack Orientation="Radzen.Orientation.Horizontal" AlignItems="Radzen.AlignItems.Center" Gap="0.5rem">
2121
<RadzenText TextStyle="TextStyle.Body2" class="rz-color-secondary">Filter:</RadzenText>
@@ -75,9 +75,9 @@ else
7575
</RadzenStack>
7676
}
7777

78-
<RadzenStack Orientation="Radzen.Orientation.Horizontal" JustifyContent="JustifyContent.SpaceBetween" AlignItems="Radzen.AlignItems.Center" class="rz-mt-6 rz-mb-4">
79-
<RadzenText TextStyle="TextStyle.H5">Recent Projects</RadzenText>
80-
<RadzenStack Orientation="Radzen.Orientation.Horizontal" Gap="0.5rem">
78+
<RadzenStack Orientation="Radzen.Orientation.Horizontal" JustifyContent="JustifyContent.SpaceBetween" AlignItems="Radzen.AlignItems.Center" Wrap="FlexWrap.Wrap" Gap="0.5rem" class="rz-mt-6 rz-mb-4">
79+
<RadzenText TextStyle="TextStyle.H5" Style="margin: 0;">Recent Projects</RadzenText>
80+
<RadzenStack Orientation="Radzen.Orientation.Horizontal" Wrap="FlexWrap.Wrap" Gap="0.5rem">
8181
<RadzenButton Variant="Radzen.Variant.Outlined" Icon="upload" Text="Import" Click="@OpenImportDialog" />
8282
<RadzenButton Variant="Radzen.Variant.Filled" Icon="add" Text="New Project" Click="@OpenCreateDialog" />
8383
</RadzenStack>

‎cloud/src/LrmCloud.Web/Pages/ProjectList.razor‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -10,13 +10,13 @@
1010

1111
<PageTitle>Projects - LRM Cloud</PageTitle>
1212

13-
<RadzenStack Orientation="Radzen.Orientation.Horizontal" JustifyContent="JustifyContent.SpaceBetween" AlignItems="Radzen.AlignItems.Center" class="rz-mb-4">
14-
<RadzenText TextStyle="TextStyle.H4">Projects</RadzenText>
13+
<RadzenStack Orientation="Radzen.Orientation.Horizontal" JustifyContent="JustifyContent.SpaceBetween" AlignItems="Radzen.AlignItems.Center" Wrap="FlexWrap.Wrap" Gap="0.5rem" class="rz-mb-4">
14+
<RadzenText TextStyle="TextStyle.H4" Style="margin: 0;">Projects</RadzenText>
1515
<RadzenButton Variant="Radzen.Variant.Filled" Icon="add" Text="New Project" Click="@OpenCreateDialog" Disabled="@(!_canCreateProject)" title="@_limitMessage" />
1616
</RadzenStack>
1717

18-
<RadzenStack Orientation="Radzen.Orientation.Horizontal" class="rz-mb-4" Gap="0.5rem">
19-
<RadzenTextBox @bind-Value="_searchText" Placeholder="Search projects..." Style="flex: 1;" Change="@(_ => StateHasChanged())" />
18+
<RadzenStack Orientation="Radzen.Orientation.Horizontal" Wrap="FlexWrap.Wrap" class="rz-mb-4" Gap="0.5rem">
19+
<RadzenTextBox @bind-Value="_searchText" Placeholder="Search projects..." Style="flex: 1; min-width: 200px;" Change="@(_ => StateHasChanged())" />
2020
<RadzenDropDown @bind-Value="_formatFilter" Data="@_formatOptions" TextProperty="Text" ValueProperty="Value" Style="min-width: 150px;" Placeholder="All Formats" AllowClear="true" Change="@(_ => StateHasChanged())" />
2121
</RadzenStack>
2222

‎cloud/src/LrmCloud.Web/Pages/Projects/Detail.razor‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -33,10 +33,10 @@ else if (_project == null)
3333
}
3434
else
3535
{
36-
<RadzenStack Orientation="Radzen.Orientation.Horizontal" JustifyContent="JustifyContent.SpaceBetween" AlignItems="Radzen.AlignItems.Center" class="rz-mb-4">
37-
<RadzenStack Orientation="Radzen.Orientation.Horizontal" AlignItems="Radzen.AlignItems.Center" Gap="0.5rem">
36+
<RadzenStack Orientation="Radzen.Orientation.Horizontal" JustifyContent="JustifyContent.SpaceBetween" AlignItems="Radzen.AlignItems.Center" Wrap="FlexWrap.Wrap" Gap="0.5rem" class="rz-mb-4">
37+
<RadzenStack Orientation="Radzen.Orientation.Horizontal" AlignItems="Radzen.AlignItems.Center" Wrap="FlexWrap.Wrap" Gap="0.5rem">
3838
<RadzenButton Icon="arrow_back" Variant="Radzen.Variant.Text" Click="@(() => Navigation.NavigateTo(""))" Size="ButtonSize.Small" />
39-
<RadzenText TextStyle="TextStyle.H4">@_project.Name</RadzenText>
39+
<RadzenText TextStyle="TextStyle.H4" Style="margin: 0;">@_project.Name</RadzenText>
4040
<RadzenBadge BadgeStyle="@UiHelpers.GetFormatBadgeStyle(_project.Format)" Text="@_project.Format" />
4141
@if (!string.IsNullOrEmpty(_project.GitHubRepo))
4242
{

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

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -34,15 +34,15 @@ else if (_project == null)
3434
}
3535
else
3636
{
37-
<RadzenStack Orientation="Radzen.Orientation.Horizontal" JustifyContent="JustifyContent.SpaceBetween" AlignItems="Radzen.AlignItems.Center" class="rz-mb-4">
38-
<RadzenStack Orientation="Radzen.Orientation.Horizontal" AlignItems="Radzen.AlignItems.Center" Gap="0.5rem">
37+
<RadzenStack Orientation="Radzen.Orientation.Horizontal" JustifyContent="JustifyContent.SpaceBetween" AlignItems="Radzen.AlignItems.Center" Wrap="FlexWrap.Wrap" Gap="0.5rem" class="rz-mb-4">
38+
<RadzenStack Orientation="Radzen.Orientation.Horizontal" AlignItems="Radzen.AlignItems.Center" Wrap="FlexWrap.Wrap" Gap="0.5rem">
3939
<RadzenButton Icon="arrow_back" Variant="Radzen.Variant.Text" Size="ButtonSize.Small"
4040
Click="@(() => Navigation.NavigateTo($"projects/{ProjectId}"))" />
41-
<RadzenText TextStyle="TextStyle.H5">@_project.Name</RadzenText>
41+
<RadzenText TextStyle="TextStyle.H5" Style="margin: 0;">@_project.Name</RadzenText>
4242
<RadzenBadge BadgeStyle="@UiHelpers.GetFormatBadgeStyle(_project.Format)" Text="@_project.Format" />
4343
</RadzenStack>
4444

45-
<RadzenStack Orientation="Radzen.Orientation.Horizontal" Gap="0.5rem">
45+
<RadzenStack Orientation="Radzen.Orientation.Horizontal" Wrap="FlexWrap.Wrap" Gap="0.5rem">
4646
@if (_hasUnsavedChanges)
4747
{
4848
<RadzenBadge BadgeStyle="BadgeStyle.Warning" Text="Unsaved changes" />

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

Lines changed: 100 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1358,3 +1358,103 @@ ul.rz-profile-menu > li > ul.rz-navigation-menu {
13581358
}
13591359
}
13601360

1361+
/* =============================================================================
1362+
Page Header - Responsive title + buttons layout
1363+
============================================================================= */
1364+
1365+
.page-header {
1366+
display: flex;
1367+
flex-wrap: wrap;
1368+
justify-content: space-between;
1369+
align-items: center;
1370+
gap: var(--lrm-space-3);
1371+
margin-bottom: var(--lrm-space-4);
1372+
}
1373+
1374+
.page-header h1,
1375+
.page-header h2,
1376+
.page-header h3,
1377+
.page-header h4,
1378+
.page-header .rz-text-h4,
1379+
.page-header .rz-text-h5,
1380+
.page-header .rz-text-h6 {
1381+
margin: 0;
1382+
flex: 1 1 auto;
1383+
min-width: 150px;
1384+
}
1385+
1386+
.page-header-actions {
1387+
display: flex;
1388+
flex-wrap: wrap;
1389+
gap: var(--lrm-space-2);
1390+
align-items: center;
1391+
}
1392+
1393+
@media (max-width: 599px) {
1394+
.page-header {
1395+
flex-direction: column;
1396+
align-items: stretch;
1397+
}
1398+
1399+
.page-header h1,
1400+
.page-header h2,
1401+
.page-header h3,
1402+
.page-header h4,
1403+
.page-header .rz-text-h4,
1404+
.page-header .rz-text-h5 {
1405+
min-width: 100%;
1406+
text-align: left;
1407+
}
1408+
1409+
.page-header-actions {
1410+
width: 100%;
1411+
justify-content: flex-start;
1412+
}
1413+
1414+
.page-header-actions .rz-button {
1415+
flex: 1 1 auto;
1416+
max-width: none;
1417+
}
1418+
}
1419+
1420+
/* Fix for RadzenStack horizontal containers to wrap on mobile */
1421+
@media (max-width: 599px) {
1422+
/* Force all horizontal stacks with space-between to wrap */
1423+
.rz-stack.rz-orientation-horizontal.rz-justify-content-space-between {
1424+
flex-wrap: wrap !important;
1425+
gap: 0.75rem !important;
1426+
}
1427+
1428+
/* Headers take full width when wrapped */
1429+
.rz-stack.rz-orientation-horizontal.rz-justify-content-space-between > .rz-text-h4,
1430+
.rz-stack.rz-orientation-horizontal.rz-justify-content-space-between > .rz-text-h5,
1431+
.rz-stack.rz-orientation-horizontal.rz-justify-content-space-between > .rz-text-h6 {
1432+
flex: 1 1 100%;
1433+
min-width: 100%;
1434+
}
1435+
1436+
/* Nested horizontal stacks (button groups) also wrap */
1437+
.rz-stack.rz-orientation-horizontal.rz-justify-content-space-between > .rz-stack.rz-orientation-horizontal {
1438+
flex-wrap: wrap !important;
1439+
width: 100%;
1440+
}
1441+
1442+
/* Buttons in mobile header take more space */
1443+
.rz-stack.rz-orientation-horizontal.rz-justify-content-space-between .rz-button {
1444+
flex: 1 1 auto;
1445+
min-width: 100px;
1446+
justify-content: center;
1447+
}
1448+
1449+
/* Search/filter rows should stack */
1450+
.rz-stack.rz-orientation-horizontal:has(.rz-textbox):has(.rz-dropdown) {
1451+
flex-wrap: wrap !important;
1452+
}
1453+
1454+
.rz-stack.rz-orientation-horizontal:has(.rz-textbox):has(.rz-dropdown) > .rz-textbox,
1455+
.rz-stack.rz-orientation-horizontal:has(.rz-textbox):has(.rz-dropdown) > .rz-dropdown {
1456+
flex: 1 1 100%;
1457+
min-width: 100% !important;
1458+
}
1459+
}
1460+

0 commit comments

Comments
 (0)