remco/EpicNext-Cms
1
1 Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

Fix mobile layout issues in admin sidebar and top-header
Local Build and Deploy / deploy (push) Successful in 50s
Details

Browse Source
This commit is contained in:
openhands committed 2026-07-14 15:29:52 +02:00
1 parent 2455a4850e
commit 76d18e2645
3 files changed
+15 -12
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

src/app/admin/layout.tsx
+1 -1
View File
@@ -398,7 +398,7 @@ async function Sidebar({
return (
<aside
data-admin
className="sticky top-0 self-start h-auto lg:h-screen overflow-y-auto bg-[var(--admin-sidebar-background)] text-[var(--admin-sidebar-text-readable)] shadow-xl flex flex-col"
className="max-lg:static sticky top-0 self-start h-full lg:h-screen overflow-y-auto bg-[var(--admin-sidebar-background)] text-[var(--admin-sidebar-text-readable)] shadow-xl flex flex-col"
>
<div className="flex items-center gap-3 px-4 py-5 border-b border-[var(--admin-border)]">
<span
src/components/admin/admin-mobile-wrapper.tsx
+3 -1
View File
@@ -25,7 +25,9 @@ export function AdminMobileWrapper({
<div className="min-h-screen bg-[var(--admin-canvas)] flex flex-col lg:flex-row">
{/* Mobile header */}
<div
className="lg:hidden sticky top-0 z-50 flex items-center gap-3 px-4 py-3 border-b"
className={`lg:hidden sticky top-0 flex items-center gap-3 px-4 py-3 border-b ${
open ? "z-30" : "z-50"
}`}
style={{
backgroundColor: "var(--admin-sidebar-background)",
borderColor: "var(--admin-border)",
src/components/top-header.tsx
+11 -10
View File
@@ -15,9 +15,9 @@ function Currency({
label: string;
}) {
return (
<div className="flex gap-x-3 sm:gap-x-2 items-center">
<div className="flex gap-x-1 sm:gap-x-2 items-center">
<div
className={`h-[25px] w-[25px] rounded-full outline-offset-[3px] ${icon}`}
className={`h-[20px] w-[20px] sm:h-[25px] sm:w-[25px] rounded-full outline-offset-[3px] ${icon}`}
/>
<div
style={{
@@ -26,7 +26,7 @@ function Currency({
}}
>
<span
className="font-semibold"
className="font-semibold text-xs sm:text-sm"
style={{
color:
"var(--color-navbar-text-readable, var(--color-navbar-text, var(--color-text)))",
@@ -34,7 +34,7 @@ function Currency({
>
{amount.toLocaleString()}
</span>{" "}
<span>{label}</span>
<span className="hidden sm:inline text-xs">{label}</span>
</div>
</div>
);
@@ -77,8 +77,8 @@ export async function TopHeader() {
return (
<div style={{ backgroundColor: "var(--color-navbar)" }}>
<div className="max-w-7xl min-h-[60px] px-4 flex items-center justify-between mx-auto">
<div className="flex flex-wrap gap-x-3 sm:gap-x-6">
<div className="max-w-7xl min-h-[44px] sm:min-h-[60px] px-2 sm:px-4 flex items-center justify-between mx-auto">
<div className="flex flex-wrap gap-x-2 sm:gap-x-6">
<Currency icon="nav-credit-icon" amount={credits} label="Credits" />
<Currency icon="nav-ducket-icon" amount={duckets} label="Duckets" />
<Currency
@@ -92,13 +92,14 @@ export async function TopHeader() {
{isStaff ? (
<details className="relative">
<summary
className="list-none cursor-pointer font-semibold [&::-webkit-details-marker]:hidden"
className="list-none cursor-pointer font-semibold text-xs sm:text-sm [&::-webkit-details-marker]:hidden"
style={{
color:
"var(--color-navbar-text-readable, var(--color-navbar-text, var(--color-text)))",
}}
>
Administration
<span className="hidden sm:inline">Administration</span>
<span className="sm:hidden">Admin</span>
</summary>
<div
role="menu"
@@ -142,7 +143,7 @@ export async function TopHeader() {
unoptimized
/>
<span
className="-ml-2 font-semibold"
className="hidden sm:inline -ml-2 font-semibold"
style={{
color:
"var(--color-navbar-text-readable, var(--color-navbar-text, var(--color-text)))",
@@ -153,7 +154,7 @@ export async function TopHeader() {
</summary>
<div
role="menu"
className="dropdown-menu absolute right-0 top-full mt-0.5 min-w-[200px] rounded-xl z-50 py-2"
className="dropdown-menu fixed sm:absolute right-2 sm:right-0 top-auto sm:top-full mt-0.5 min-w-[200px] rounded-xl z-50 py-2"
>
<Link href="/me" className="dropdown-item" role="menuitem">
My dashboard