From 88b98f334c9f26401912b82768d3dc86f9da39c8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Adina=20=C8=9Aeudan?= <adina@devplant.ro>
Date: Tue, 13 Dec 2022 21:31:07 +0200
Subject: [PATCH] Editable input improvement

---
 .../editable-input.component.html             | 29 ++++++++++++-------
 .../editable-input.component.scss             |  1 +
 2 files changed, 20 insertions(+), 10 deletions(-)

diff --git a/src/lib/inputs/editable-input/editable-input.component.html b/src/lib/inputs/editable-input/editable-input.component.html
index 820b32a..1f6f6a3 100644
--- a/src/lib/inputs/editable-input/editable-input.component.html
+++ b/src/lib/inputs/editable-input/editable-input.component.html
@@ -3,15 +3,17 @@
         {{ value }}
     </div>
 
-    <iqser-circle-button
-        (action)="editing = true"
-        [tooltip]="editTooltip"
-        [type]="buttonsType"
-        class="edit-button"
-        icon="iqser:edit"
-    ></iqser-circle-button>
+    <div class="d-flex">
+        <iqser-circle-button
+            (action)="editing = true"
+            [tooltip]="editTooltip"
+            [type]="buttonsType"
+            class="edit-button"
+            icon="iqser:edit"
+        ></iqser-circle-button>
 
-    <ng-content select="[slot=editing]"></ng-content>
+        <ng-content select="[slot=editing]"></ng-content>
+    </div>
 </ng-container>
 
 <ng-container *ngIf="editing">
@@ -21,6 +23,13 @@
         </div>
     </form>
 
-    <iqser-circle-button (action)="saveValue()" [tooltip]="saveTooltip" [type]="buttonsType" icon="iqser:check"></iqser-circle-button>
-    <iqser-circle-button (action)="editing = false" [tooltip]="cancelTooltip" [type]="buttonsType" icon="iqser:close"></iqser-circle-button>
+    <div class="d-flex">
+        <iqser-circle-button (action)="saveValue()" [tooltip]="saveTooltip" [type]="buttonsType" icon="iqser:check"></iqser-circle-button>
+        <iqser-circle-button
+            (action)="editing = false"
+            [tooltip]="cancelTooltip"
+            [type]="buttonsType"
+            icon="iqser:close"
+        ></iqser-circle-button>
+    </div>
 </ng-container>
diff --git a/src/lib/inputs/editable-input/editable-input.component.scss b/src/lib/inputs/editable-input/editable-input.component.scss
index 241d303..50f0385 100644
--- a/src/lib/inputs/editable-input/editable-input.component.scss
+++ b/src/lib/inputs/editable-input/editable-input.component.scss
@@ -1,6 +1,7 @@
 :host {
     display: flex;
     align-items: center;
+    justify-content: space-between;
 }
 
 iqser-circle-button {