From bc920d4bdb03212cc55c7ef0affd6d986e5a20fc Mon Sep 17 00:00:00 2001
From: Oskari Rautiainen <oskari.rautiainen@gmail.com>
Date: Sun, 5 Nov 2023 09:47:19 -0800
Subject: [PATCH] Add a label to cron copy input

---
 demo/src/cron-editor.css | 15 +++++++++++----
 demo/src/cron-editor.ts  |  5 +++--
 2 files changed, 14 insertions(+), 6 deletions(-)

diff --git a/demo/src/cron-editor.css b/demo/src/cron-editor.css
index 87b6aeb..d924123 100644
--- a/demo/src/cron-editor.css
+++ b/demo/src/cron-editor.css
@@ -38,15 +38,17 @@
   line-height: 4rem;
   width: 100%;
 }
+
 .user-input::part(form-control-label) {
   color: #a3a3a3;
   float: left;
   font-size: 0.9rem;
 }
 
-.copy-container {
-  margin-top: 2rem;
+.cron-container {
+  margin-top: 1rem;
   display: inline-flex;
+  align-items: end;
 }
 
 .cron-input::part(input) {
@@ -60,11 +62,16 @@
   width: 300px;
 }
 
+.cron-input::part(form-control-label) {
+  color: #a3a3a3;
+  float: left;
+  font-size: 0.9rem;
+}
+
 .copy-button::part(button) {
   background: #202020;
   width: 4rem;
-  text-align: center;
-  height: 100%;
+  height: 40px;
 }
 
 .copy-button::part(copy-icon) {
diff --git a/demo/src/cron-editor.ts b/demo/src/cron-editor.ts
index e4cf7c0..0af8193 100644
--- a/demo/src/cron-editor.ts
+++ b/demo/src/cron-editor.ts
@@ -29,14 +29,15 @@ export class App extends LitElement {
     return html` <div class="container">
       <sl-input
         class="user-input"
-        label="Type a schedule."
+        label="Type a schedule"
         value="Every minute"
         @sl-input="${this.handleUserInput}"
       ></sl-input>
-      <div class="copy-container">
+      <div class="cron-container">
         <sl-input
           class="cron-input"
           id="cron-input"
+          label="Cron schedule"
           readonly
           value=${cron}
           style="display:inline-block;"