refactor(ui): minor tweaks

Author: sfxcode

app/assets/sass/main.scss

@@ -36,7 +36,7 @@ html {
 }
 
 .card {
-  padding: 1.5rem;
+  padding: 1rem;
   color: var(--p-text-color);
   margin-bottom: 1rem;
   border-radius: $borderRadius;

app/layouts/default.vue

@@ -8,7 +8,7 @@ const isOnMobile = useState<boolean>('isOnMobile')
     <AppSidebar />
     <div id="workspace" :class="[{ collapsed }, { mobile: isOnMobile }]">
       <AppTopbar />
-      <div class="m-4">
+      <div class="m-1 mt-4">
         <slot />
       </div>
     </div>

app/pages/prime/messages.vue

@@ -12,44 +12,42 @@ function doSomeDeleteAction(idToDelete: number) {
 
 <template>
   <div class="card">
-    <div class="card">
-      <h2>PrimeVue Toast Demo</h2>
+    <h2>PrimeVue Toast Demo</h2>
 
-      <div class="flex flex-row gap-4">
-        <div>
-          <Button label="Success" class="p-button-success" @click="showSuccessMessage('Success Message', 'Message Content')" />
-        </div>
-        <div>
-          <Button label="Info" class="p-button-info" @click="showInfoMessage('Info Message', 'Message Content')" />
-        </div>
-        <div>
-          <Button label="Warn" class="p-button-warning" @click="showWarnMessage('Warn Message', 'Message Content')" />
-        </div>
-        <div>
-          <Button label="Error" class="p-button-danger" @click="showErrorMessage('Error Message', 'Message Content')" />
-        </div>
-        <Toast />
+    <div class="flex flex-row gap-4">
+      <div>
+        <Button label="Success" class="p-button-success" @click="showSuccessMessage('Success Message', 'Message Content')" />
       </div>
-      <h2>Confirmation</h2>
-      <div class="flex flex-row gap-4">
-        <Button label="Trigger action with confirmation" class="p-button-info" @click="confirmAction(doSomeAction)" />
-        <Button label="Trigger delete action with confirmation" class="p-button-danger" @click="confirmDelete(1, doSomeDeleteAction)" />
+      <div>
+        <Button label="Info" class="p-button-info" @click="showInfoMessage('Info Message', 'Message Content')" />
       </div>
-      <h2>Messages</h2>
-      <div class="flex flex-row gap-4">
-        <Message severity="success">
-          Success Message Content
-        </Message>
-        <Message severity="info">
-          Info Message Content
-        </Message>
-        <Message severity="warn">
-          Warning Message Content
-        </Message>
-        <Message severity="error">
-          Error Message Content
-        </Message>
+      <div>
+        <Button label="Warn" class="p-button-warning" @click="showWarnMessage('Warn Message', 'Message Content')" />
       </div>
+      <div>
+        <Button label="Error" class="p-button-danger" @click="showErrorMessage('Error Message', 'Message Content')" />
+      </div>
+      <Toast />
+    </div>
+    <h2>Confirmation</h2>
+    <div class="flex flex-row gap-4">
+      <Button label="Trigger action with confirmation" class="p-button-info" @click="confirmAction(doSomeAction)" />
+      <Button label="Trigger delete action with confirmation" class="p-button-danger" @click="confirmDelete(1, doSomeDeleteAction)" />
+    </div>
+    <h2>Messages</h2>
+    <div class="flex flex-row gap-4 flex-wrap">
+      <Message severity="success">
+        Success Message Content
+      </Message>
+      <Message severity="info">
+        Info Message Content
+      </Message>
+      <Message severity="warn">
+        Warning Message Content
+      </Message>
+      <Message severity="error">
+        Error Message Content
+      </Message>
     </div>
   </div>
 </template>