From 770bd5a3134f5e35f5c14475b41a4da703a7f51b Mon Sep 17 00:00:00 2001
From: Stefan Wilke <stefan.wilke1@axelspringer.com>
Date: Wed, 15 Nov 2023 18:35:35 +0100
Subject: [PATCH] add character count to create view

---
 .../components/CreatePaste/CreatePaste.tsx    |  5 +++--
 .../CreatePaste/createPaste.module.css        | 19 +++++++++++++++----
 2 files changed, 18 insertions(+), 6 deletions(-)

diff --git a/frontend/src/components/CreatePaste/CreatePaste.tsx b/frontend/src/components/CreatePaste/CreatePaste.tsx
index ca9a058..f5fbe1b 100644
--- a/frontend/src/components/CreatePaste/CreatePaste.tsx
+++ b/frontend/src/components/CreatePaste/CreatePaste.tsx
@@ -139,15 +139,16 @@ const CreatePaste: Component<CreatePasteProps> = ({onCreatePaste, initialPaste})
                  onInput={updateFormField("password")}/>
         </div>
         <hr/>
-        <div>
+        <div class={styles.content}>
           <textarea minLength="5"
                     maxLength="4096"
                     required
                     autofocus
                     rows="20"
-                    cols="75"
+                    cols="50"
                     placeholder="Paste here"
                     onInput={updateFormField("content")}>{form.content}</textarea>
+          <span>{form.content?.length || 0} / 4096</span>
         </div>
       </fieldset>
 
diff --git a/frontend/src/components/CreatePaste/createPaste.module.css b/frontend/src/components/CreatePaste/createPaste.module.css
index 5dfe5d6..a303e2c 100644
--- a/frontend/src/components/CreatePaste/createPaste.module.css
+++ b/frontend/src/components/CreatePaste/createPaste.module.css
@@ -1,7 +1,6 @@
 
 .lastPaste {
     margin: .5rem;
-    user-select: none;
     color: green;
     user-select: all;
     cursor: pointer;
@@ -47,6 +46,20 @@
     align-items: center;
 }
 
+.createForm .content {
+    flex-direction: column;
+    gap: 10px;
+    text-align: end;
+}
+
+.createForm .content span {
+    text-align: right;
+    display: inline-block;
+    width: 100%;
+    padding-right: 2rem;
+    font-size: .7rem;
+}
+
 .createForm label,
 .createForm input[type=radio],
 .createForm select {
@@ -58,7 +71,7 @@
 .createForm input[type=text],
 .createForm input[type=password] {
     display: inline-block;
-    width: 20rem;
+    width: 15rem;
     margin: 0;
 }
 
@@ -69,12 +82,10 @@
     margin: .5rem;
 }
 
-
 .createForm input[type=radio] {
     margin-right: .3rem;
 }
 
-
 .createForm label,
 .createForm button,
 .createForm select,