From 8a6c363de466b3a9e8e9f20aa5180888bc160cb0 Mon Sep 17 00:00:00 2001
From: Stefano Pigozzi <me@steffo.eu>
Date: Sat, 16 Jul 2022 18:04:03 +0200
Subject: [PATCH] Make the padding of EditableText consistent in all
 EditingModes

---
 components/generic/editable/inputs.module.css | 6 ++++++
 components/generic/editable/inputs.tsx        | 5 ++++-
 2 files changed, 10 insertions(+), 1 deletion(-)
 create mode 100644 components/generic/editable/inputs.module.css

diff --git a/components/generic/editable/inputs.module.css b/components/generic/editable/inputs.module.css
new file mode 100644
index 0000000..7dfcd0c
--- /dev/null
+++ b/components/generic/editable/inputs.module.css
@@ -0,0 +1,6 @@
+.editableTextView {
+    /* Match the padding of the edit input
+     * 8px padding + 2px border 
+     */
+    padding: 10px;
+}
\ No newline at end of file
diff --git a/components/generic/editable/inputs.tsx b/components/generic/editable/inputs.tsx
index 5fab1ee..7dcf97b 100644
--- a/components/generic/editable/inputs.tsx
+++ b/components/generic/editable/inputs.tsx
@@ -2,6 +2,7 @@ import { ComponentPropsWithoutRef } from "react"
 import { FestaMoment } from "../renderers/datetime"
 import { FestaMarkdownRenderer } from "../renderers/markdown"
 import { EditingModeBranch } from "./base"
+import style from "./inputs.module.css"
 
 
 type TextInputProps = ComponentPropsWithoutRef<"input"> & { value: string }
@@ -19,7 +20,9 @@ export const EditableText = (props: TextInputProps) => {
                 <input type="text" {...props} />
             }
             view={
-                <div>{props.value}</div>
+                <div className={style.editableTextView}>
+                    {props.value}
+                </div>
             }
         />
     )