fix(edit): remove overflow of settings and adjust preview size on mob…

…ile (#1660)
entur · Sep 27, 2024 · ece5c0f · ece5c0f
1 parent 48f0ba0
commit ece5c0f
Show file tree

Hide file tree

Showing 3 changed files with 6 additions and 6 deletions.
diff --git a/tavla/app/(admin)/edit/[id]/components/Preview/index.tsx b/tavla/app/(admin)/edit/[id]/components/Preview/index.tsx
@@ -14,11 +14,11 @@ function Preview({
 }) {
     return (
         <div
-            className="previewContainer text-2xl"
+            className="previewContainer md:text-2xl"
             data-theme={board?.theme ?? 'dark'}
         >
             <Header theme={board.theme} organizationLogo={organization?.logo} />
-            <div className="h-[50rem]">
+            <div className="md:h-[50rem] h-96">
                 <Board board={board} />
             </div>
             <Footer

diff --git a/tavla/app/(admin)/edit/[id]/components/TileCard/index.tsx b/tavla/app/(admin)/edit/[id]/components/TileCard/index.tsx
@@ -405,7 +405,7 @@ function TileCard({
                         </div>
 
                         <Heading4>Transportmidler og linjer</Heading4>
-                        <div className="flex flex-row gap-4">
+                        <div className="flex flex-col md:flex-row gap-4">
                             {linesByModeSorted.map(
                                 ({ transportMode, lines }) => (
                                     <TransportModeAndLines
@@ -422,7 +422,7 @@ function TileCard({
                             value={uniqLines.length.toString()}
                         />
 
-                        <div className="flex flex-row justify-start gap-4 mt-8">
+                        <div className="flex flex-col md:flex-row justify-start gap-4 mt-8">
                             <SubmitButton
                                 variant="primary"
                                 aria-label="lagre valg"

diff --git a/tavla/app/(admin)/edit/[id]/page.tsx b/tavla/app/(admin)/edit/[id]/page.tsx
@@ -79,9 +79,9 @@ export default async function EditPage({ params }: TProps) {
                     </div>
                 </div>
 
-                <div className="rounded-md py-8 px-6 flex flex-col gap-4 bg-background">
+                <div className="rounded-md md:py-8 py-2 md:px-6 px-2 flex flex-col gap-4 bg-background">
                     <Heading2>Innstillinger</Heading2>
-                    <div className="grid grid-cols-[repeat(auto-fill,minmax(400px,1fr))] gap-8">
+                    <div className="grid grid-cols md:grid-cols-[repeat(auto-fill,minmax(400px,1fr))] gap-8">
                         <MetaSettings
                             bid={params.id}
                             meta={board.meta}