reponsive moblie

This commit is contained in:
2026-07-17 09:54:41 +07:00
parent c232fe698f
commit 5c818583dc
3 changed files with 241 additions and 9 deletions

View File

@@ -73,6 +73,11 @@
display: none;
}
.assets-mobile-list,
.consumables-mobile-list {
display: none;
}
@media (max-width: 900px) {
body.app-shell {
width: 100%;
@@ -177,6 +182,54 @@
min-width: 700px;
}
.assets-page,
.consumables-page {
padding: 0.75rem;
}
.assets-page .page-header,
.consumables-page .page-header {
margin-bottom: 0.75rem;
}
.assets-page .asset-header-actions,
.consumables-page .consumable-header-actions {
width: 100%;
display: flex;
flex-flow: row nowrap;
overflow-x: auto;
overscroll-behavior-x: contain;
-webkit-overflow-scrolling: touch;
padding-bottom: 0.25rem;
}
.assets-page .asset-header-actions > button,
.consumables-page .consumable-header-actions > button {
width: auto;
flex: 0 0 auto;
}
.assets-page .page-filters,
.consumables-page .page-filters {
margin-bottom: 0.75rem;
}
.assets-page .assets-desktop-table,
.consumables-page .consumables-desktop-table {
display: none;
}
.assets-page .assets-mobile-list,
.consumables-page .consumables-mobile-list {
display: flex;
min-height: 0;
}
.assets-page .asset-mobile-card,
.consumables-page .consumable-mobile-card {
overflow-wrap: anywhere;
}
.page-pager {
gap: 0.5rem;
flex-direction: column;
@@ -201,7 +254,18 @@
.apps-stats {
grid-template-columns: 1fr;
}
.assets-page .page-header h1,
.consumables-page .page-header h1 {
font-size: 1.25rem;
}
.assets-page .page-header p,
.consumables-page .page-header p {
font-size: 0.75rem;
}
}
</style>
</head>
<body class="app-shell bg-background text-on-surface antialiased flex h-screen w-screen">