improve layout

resources/js/components/SMMessage.vue

@@ -1,8 +1,10 @@
 <template>
+    <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>
 
 <script setup lang="ts">
@@ -23,8 +25,13 @@ defineProps({
 </script>
 
 <style lang="scss">
+.sm-message {
+    &.message-outer {
+        justify-content: center;
+        align-self: center;
+
         .message {
-    display: flex;
+            display: inline-flex;
             padding: map-get($spacer, 2) map-get($spacer, 3);
             margin-bottom: map-get($spacer, 4);
             text-align: center;
@@ -55,16 +62,16 @@ defineProps({
             ion-icon {
                 height: 1.3em;
                 width: 1.3em;
-        justify-content: center;
-        align-self: center;
+                margin-right: map-get($spacer, 1);
             }
 
             p {
-        flex: 1;
                 margin-bottom: 0;
                 justify-content: center;
                 align-self: center;
                 white-space: pre-wrap;
             }
         }
+    }
+}
 </style>