From 8e4044dffbbd79d22fd09b9927476461ad9b8157 Mon Sep 17 00:00:00 2001
From: James Collins <james.collins@outlook.com.au>
Date: Tue, 21 Feb 2023 13:10:57 +1000
Subject: [PATCH] improve layout

---
 resources/js/components/SMMessage.vue | 91 ++++++++++++++-------------
 1 file changed, 49 insertions(+), 42 deletions(-)

diff --git a/resources/js/components/SMMessage.vue b/resources/js/components/SMMessage.vue
index 7007fb6..9d0f656 100644
--- a/resources/js/components/SMMessage.vue
+++ b/resources/js/components/SMMessage.vue
@@ -1,7 +1,9 @@
 <template>
-    <div :class="['message', type]">
-        <ion-icon v-if="icon" :name="icon"></ion-icon>
-        <p>{{ message }}</p>
+    <div class="sm-message message-outer">
+        <div :class="['message', type]">
+            <ion-icon v-if="icon" :name="icon"></ion-icon>
+            <p>{{ message }}</p>
+        </div>
     </div>
 </template>
 
@@ -23,48 +25,53 @@ defineProps({
 </script>
 
 <style lang="scss">
-.message {
-    display: flex;
-    padding: map-get($spacer, 2) map-get($spacer, 3);
-    margin-bottom: map-get($spacer, 4);
-    text-align: center;
-    font-size: 90%;
-    word-break: break-word;
-
-    &.primary {
-        background-color: $primary-color-lighter;
-        color: $primary-color-darker;
-        border: 1px solid $primary-color-lighter;
-        border-radius: 12px;
-    }
-
-    &.success {
-        background-color: $success-color-lighter;
-        color: $success-color-darker;
-        border: 1px solid $success-color-lighter;
-        border-radius: 12px;
-    }
-
-    &.error {
-        background-color: $danger-color-lighter;
-        color: $danger-color-darker;
-        border: 1px solid $danger-color-lighter;
-        border-radius: 12px;
-    }
-
-    ion-icon {
-        height: 1.3em;
-        width: 1.3em;
+.sm-message {
+    &.message-outer {
         justify-content: center;
         align-self: center;
-    }
 
-    p {
-        flex: 1;
-        margin-bottom: 0;
-        justify-content: center;
-        align-self: center;
-        white-space: pre-wrap;
+        .message {
+            display: inline-flex;
+            padding: map-get($spacer, 2) map-get($spacer, 3);
+            margin-bottom: map-get($spacer, 4);
+            text-align: center;
+            font-size: 90%;
+            word-break: break-word;
+
+            &.primary {
+                background-color: $primary-color-lighter;
+                color: $primary-color-darker;
+                border: 1px solid $primary-color-lighter;
+                border-radius: 12px;
+            }
+
+            &.success {
+                background-color: $success-color-lighter;
+                color: $success-color-darker;
+                border: 1px solid $success-color-lighter;
+                border-radius: 12px;
+            }
+
+            &.error {
+                background-color: $danger-color-lighter;
+                color: $danger-color-darker;
+                border: 1px solid $danger-color-lighter;
+                border-radius: 12px;
+            }
+
+            ion-icon {
+                height: 1.3em;
+                width: 1.3em;
+                margin-right: map-get($spacer, 1);
+            }
+
+            p {
+                margin-bottom: 0;
+                justify-content: center;
+                align-self: center;
+                white-space: pre-wrap;
+            }
+        }
     }
 }
 </style>