community-scripts/ProxmoxVE
5
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Refactor layout and component styles for improved responsiveness (#5195)

Browse Source
This commit is contained in:
Bram Suurd 2025-06-16 17:13:33 +02:00 committed by GitHub
parent 0b3c645ffb
commit 8241ed932d
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
6 changed files with 8 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
frontend/src/app/layout.tsx
View File

@ -104,7 +104,7 @@ export default function RootLayout({
<Navbar /> <Navbar />
<div className="flex min-h-screen flex-col justify-center"> <div className="flex min-h-screen flex-col justify-center">
<div className="flex w-full justify-center"> <div className="flex w-full justify-center">
<div className="w-full max-w-7xl "> <div className="w-full max-w-[1440px] ">
<QueryProvider> <QueryProvider>
<NuqsAdapter>{children}</NuqsAdapter> <NuqsAdapter>{children}</NuqsAdapter>
</QueryProvider> </QueryProvider>

2
frontend/src/app/scripts/_components/ScriptAccordion.tsx
View File

@ -56,7 +56,7 @@ export default function ScriptAccordion({
value={expandedItem} value={expandedItem}
onValueChange={handleAccordionChange} onValueChange={handleAccordionChange}
collapsible collapsible
className="overflow-y-scroll max-h-[calc(100vh-225px)] overflow-x-hidden mt-3 p-2" className="overflow-y-scroll max-h-[calc(100vh-225px)] overflow-x-hidden p-2"
> >
{items.map((category) => ( {items.map((category) => (
<AccordionItem <AccordionItem

4
frontend/src/app/scripts/_components/ScriptItem.tsx
View File

@ -120,7 +120,7 @@ export function ScriptItem({ item, setSelectedScript }: ScriptItemProps) {
}; };
return ( return (
<div className="w-full max-w-5xl mx-auto"> <div className="w-full mx-auto">
<div className="flex w-full flex-col"> <div className="flex w-full flex-col">
<div className="mb-3 flex items-center justify-between"> <div className="mb-3 flex items-center justify-between">
<h2 className="text-2xl font-semibold tracking-tight text-foreground/90">Selected Script</h2> <h2 className="text-2xl font-semibold tracking-tight text-foreground/90">Selected Script</h2>
@ -132,7 +132,7 @@ export function ScriptItem({ item, setSelectedScript }: ScriptItemProps) {
</button> </button>
</div> </div>
<div className="rounded-xl border border-border/40 bg-gradient-to-b from-card/30 to-background/50 backdrop-blur-sm shadow-sm"> <div className="rounded-xl border border-border bg-gradient-to-b from-card/30 to-background/50 backdrop-blur-sm shadow-sm">
<div className="p-6 space-y-6"> <div className="p-6 space-y-6">
<Suspense fallback={<div className="animate-pulse h-32 bg-accent/20 rounded-xl" />}> <Suspense fallback={<div className="animate-pulse h-32 bg-accent/20 rounded-xl" />}>
<ScriptHeader item={item} /> <ScriptHeader item={item} />

2
frontend/src/app/scripts/_components/Sidebar.tsx
View File

@ -22,7 +22,7 @@ const Sidebar = ({
}, [] as Script[]); }, [] as Script[]);
return ( return (
<div className="flex min-w-72 flex-col sm:max-w-72"> <div className="flex min-w-[350px] flex-col sm:max-w-[350px]">
<div className="flex items-end justify-between pb-4"> <div className="flex items-end justify-between pb-4">
<h1 className="text-xl font-bold">Categories</h1> <h1 className="text-xl font-bold">Categories</h1>
<p className="text-xs italic text-muted-foreground"> <p className="text-xs italic text-muted-foreground">

2
frontend/src/app/scripts/page.tsx
View File

@ -47,7 +47,7 @@ function ScriptContent() {
setSelectedScript={setSelectedScript} setSelectedScript={setSelectedScript}
/> />
</div> </div>
<div className="mx-7 w-full sm:mx-0 sm:ml-7"> <div className="mx-4 w-full sm:mx-0 sm:ml-4">
{selectedScript && item ? ( {selectedScript && item ? (
<ScriptItem item={item} setSelectedScript={setSelectedScript} /> <ScriptItem item={item} setSelectedScript={setSelectedScript} />
) : ( ) : (

2
frontend/src/components/Navbar.tsx
View File

@ -34,7 +34,7 @@ function Navbar() {
isScrolled ? "glass border-b bg-background/50" : "" isScrolled ? "glass border-b bg-background/50" : ""
}`} }`}
> >
<div className="flex h-20 w-full max-w-7xl items-center justify-between sm:flex-row"> <div className="flex h-20 w-full max-w-[1440px] items-center justify-between sm:flex-row">
<Link <Link
href={"/"} href={"/"}
className="flex cursor-pointer w-full justify-center sm:justify-start flex-row-reverse items-center gap-2 font-semibold sm:flex-row" className="flex cursor-pointer w-full justify-center sm:justify-start flex-row-reverse items-center gap-2 font-semibold sm:flex-row"