Make ViewContent a flex-based component

components/events/actions/edit.tsx

@@ -28,8 +28,9 @@ export const EventsActionEdit = ({ data, mutate, save, setEditing }: EventsActio
             setEditing(false)
         }}>
             <ViewContent
-                title={
-                    useMemo(
+                content={<>
+                    <h1>
+                        {useMemo(
                             () => (
                                 <input
                                     type="text"
@@ -39,9 +40,8 @@ export const EventsActionEdit = ({ data, mutate, save, setEditing }: EventsActio
                                 />
                             ),
                             [t, mutate, name]
-                    )
-                }
-                content={<>
+                        )}
+                    </h1>
                     {useMemo(
                         () => (
                             <textarea

components/events/actions/view.module.css

@@ -0,0 +1,3 @@
+.padAsInput {
+    padding: 10px;
+}

components/events/actions/view.tsx

@@ -2,6 +2,7 @@ import { Event } from "@prisma/client"
 import { memo } from "react"
 import { FestaMarkdownRenderer } from "../../generic/renderers/markdown"
 import { ViewContent } from "../../generic/views/content"
+import style from "./view.module.css"
 
 
 export type EventsActionViewProps = {
@@ -13,12 +14,15 @@ export const EventsActionView = memo(({ data }: EventsActionViewProps) => {
     return (
         <form>
             <ViewContent
-                title={<div style={{ padding: "10px" }}>
+                content={<>
+                    <h1 className={style.padAsInput}>
                         {data.name}
-                </div>}
-                content={<div>
-                    <FestaMarkdownRenderer code={data.description} />
-                </div>}
+                    </h1>
+                    <FestaMarkdownRenderer
+                        className={style.padAsInput}
+                        code={data.description}
+                    />
+                </>}
             />
         </form>
     )

components/generic/renderers/markdown.tsx

@@ -1,7 +1,8 @@
 import { memo } from "react"
 import { default as ReactMarkdown } from "react-markdown"
+import { ReactMarkdownOptions } from "react-markdown/lib/react-markdown"
 
-type FestaMarkdownRendererProps = {
+type FestaMarkdownRendererProps = Omit<ReactMarkdownOptions, "children"> & {
     code: string,
 }
 
@@ -10,9 +11,10 @@ type FestaMarkdownRendererProps = {
  * 
  * Currently, it converts `h1` and `h2` into `h3`, and disables the rendering of `img` elements.
  */
-export const FestaMarkdownRenderer = memo(({ code }: FestaMarkdownRendererProps) => {
+export const FestaMarkdownRenderer = memo(({ code, ...props }: FestaMarkdownRendererProps) => {
     return (
         <ReactMarkdown
+            {...props}
             components={{
                 h1: "h2",  // h1 is reserved for the page name
                 h2: "h3",
@@ -20,6 +22,7 @@ export const FestaMarkdownRenderer = memo(({ code }: FestaMarkdownRendererProps)
                 h4: "h5",
                 h5: "h6",
                 img: undefined, // images reveal the IP of the user to third parties!
+                ...props.components,
             }}
         >
             {code}

components/generic/views/content.module.css

@@ -1,25 +1,11 @@
 .viewContent {
-    display: grid;
-    grid-template-areas:
-        "title"
-        "content"
-    ;
-    grid-template-columns: auto;
-    grid-template-rows: auto 1fr;
+    display: flex;
+    flex-direction: column;
 
     gap: 4px;
 
-    justify-content: stretch;
+    align-content: stretch;
 
     max-width: 800px;
     margin: 0 auto;
 }
-
-.viewContentTitle {
-    grid-area: title;
-    text-align: center;
-}
-
-.viewContentContent {
-    grid-area: content;
-}

components/generic/views/content.tsx

@@ -3,7 +3,6 @@ import style from "./content.module.css"
 
 
 export type ViewContentProps = {
-    title: ReactNode
     content: ReactNode
 }
 
@@ -13,12 +12,7 @@ export type ViewContentProps = {
 export const ViewContent = memo((props: ViewContentProps) => {
     return (
         <main className={style.viewContent}>
-            <h1 className={style.viewContentTitle}>
-                {props.title}
-            </h1>
-            <div className={style.viewContentContent}>
             {props.content}
-            </div>
         </main>
     )
 })

styles/elements.css

@@ -19,6 +19,10 @@ h1, h2, h3, h4, h5, h6 {
     margin: 0;
 }
 
+h1 {
+    text-align: center;
+}
+
 a {
     color: var(--anchor);
 }
@@ -70,8 +74,17 @@ textarea {
     border-radius: 16px 16px 0 16px;
 
     resize: vertical;
+    margin: 0;
 }
 
 pre {
     white-space: pre-wrap;
 }
+
+p:first-child {
+    margin-top: 0;
+}
+
+p:last-child {
+    margin-bottom: 0;
+}