From ee0d4654d5786ce227bd343d7a5285f53c6bc036 Mon Sep 17 00:00:00 2001
From: Sven van de Scheur <svenvandescheur@gmail.com>
Date: Mon, 16 Dec 2024 18:06:30 +0100
Subject: [PATCH] :iphone: - style: improve responsive design of Toolbar
 component

---
 src/components/form/form/form.scss  |  4 ----
 src/components/toolbar/toolbar.scss | 33 +++++++++++++++--------------
 2 files changed, 17 insertions(+), 20 deletions(-)

diff --git a/src/components/form/form/form.scss b/src/components/form/form/form.scss
index 5b011f42..ef9c9051 100644
--- a/src/components/form/form/form.scss
+++ b/src/components/form/form/form.scss
@@ -16,8 +16,4 @@
     flex-direction: row;
     width: auto;
   }
-
-  .mykn-toolbar .mykn-button {
-    justify-content: center !important;
-  }
 }
diff --git a/src/components/toolbar/toolbar.scss b/src/components/toolbar/toolbar.scss
index d745dd9f..52627b91 100644
--- a/src/components/toolbar/toolbar.scss
+++ b/src/components/toolbar/toolbar.scss
@@ -80,6 +80,7 @@
   }
 
   --typography-color-link: var(--typography-color-body);
+
   &--variant-primary {
     --toolbar-color-text-primary: var(--typography-color-background);
     background-color: var(--page-color-primary);
@@ -227,22 +228,6 @@
       height: 100%;
     }
 
-    &#{$self}--align-start .mykn-a,
-    &#{$self}--align-start .mykn-button,
-    &#{$self}--align-start .mykn-dropdown {
-      display: flex;
-      justify-content: start;
-      text-align: start;
-    }
-
-    &#{$self}--align-end .mykn-a,
-    &#{$self}--align-end .mykn-button,
-    &#{$self}--align-end .mykn-dropdown {
-      display: flex;
-      justify-content: end;
-      text-align: end;
-    }
-
     &#{$self}--align-center .mykn-a,
     &#{$self}--align-center .mykn-button,
     &#{$self}--align-center .mykn-dropdown,
@@ -279,6 +264,22 @@
         justify-content: space-between;
         text-align: center;
       }
+
+      &#{$self}--align-start .mykn-a,
+      &#{$self}--align-start .mykn-button,
+      &#{$self}--align-start .mykn-dropdown {
+        display: flex;
+        justify-content: start;
+        text-align: start;
+      }
+
+      &#{$self}--align-end .mykn-a,
+      &#{$self}--align-end .mykn-button,
+      &#{$self}--align-end .mykn-dropdown {
+        display: flex;
+        justify-content: end;
+        text-align: end;
+      }
     }
   }
 }