small ui fixes

src/components/TopBar/Settings/AccountSettings.vue

@@ -108,7 +108,7 @@ const toggleEncryption = async () => {
             <div class="items-top w-full flex-row sm:flex">
               <div class="font-bold sm:w-4/12">Export notes</div>
               <UIButton size="sm" @click="exportNotes">
-                <i class="fa-fw fa-solid fa-file-export"></i>
+                <i class="fa-fw fa-solid fa-file-export mr-2"></i>
                 Export notes
               </UIButton>
             </div>
@@ -116,7 +116,7 @@ const toggleEncryption = async () => {
               <div class="flex-shrink-0 font-bold sm:w-4/12">Delete account</div>
               <div>
                 <UIButton size="sm" color="error" @click="showDeleteAccountDialog = true">
-                  <i class="fa-fw fa-solid fa-trash"></i>
+                  <i class="fa-fw fa-solid fa-trash mr-2"></i>
                   Delete account
                 </UIButton>
                 <UIAlert
@@ -159,7 +159,7 @@ const toggleEncryption = async () => {
                     @click="showEncryptionDialog = true"
                     v-if="showEncryptionDialog === false"
                   >
-                    <i class="fa-fw fa-solid fa-key"></i>
+                    <i class="fa-fw fa-solid fa-key mr-2"></i>
                     Disable end-to-end encryption
                   </UIButton>
                 </template>

src/components/ui/UIButton.vue

@@ -51,7 +51,12 @@ const styleClass = computed(() => {
   >
     <slot></slot>
   </label>
-  <button type="button" class="dui-btn h-auto px-3 py-2 duration-0" :class="styleClass" v-else>
+  <button
+    type="button"
+    class="dui-btn inline-block h-auto max-w-full truncate px-3 py-2 duration-0"
+    :class="styleClass"
+    v-else
+  >
     <slot></slot>
   </button>
 </template>

src/components/ui/UIInputCheckbox.vue

@@ -28,7 +28,7 @@ const styleClass = computed(() => {
     type="checkbox"
     class="dui-checkbox dui-checkbox-sm border-secondary"
     :class="styleClass"
-    :checked="props.modelValue"
+    :checked="props.modelValue || props.checked"
     @change="emit('update:modelValue', ($event.target as HTMLInputElement).checked)"
     :disabled="props.disabled"
   />