feat: improved more menus

Author: Akryum

packages/app-frontend/src/features/components/ComponentsInspector.vue

@@ -109,7 +109,7 @@ export default defineComponent({
     </SplitPane>
 
     <portal to="more-menu">
-      <div class="space-y-1 px-4 py-2 text-sm">
+      <div class="space-y-1 px-3 py-2 text-sm">
         <div>Component names:</div>
 
         <VueGroup
@@ -129,6 +129,21 @@ export default defineComponent({
           />
         </VueGroup>
       </div>
+
+      <div class="space-y-1 px-3 py-2 text-sm">
+        <VueSwitch v-model="$shared.editableProps">
+          Editable props
+        </VueSwitch>
+        <div class="flex items-center space-x-1 text-xs opacity-50">
+          <VueIcon
+            icon="warning"
+            class="w-4 h-4 flex-none"
+          />
+          <span>May print warnings in the console</span>
+        </div>
+      </div>
+
+      <div class="border-t border-gray-200 dark:border-gray-800 my-1" />
     </portal>
 
     <portal to="header-end">

packages/app-frontend/src/features/settings/GlobalSettings.vue

@@ -38,21 +38,6 @@ export default defineComponent({})
       </VueGroup>
     </VueFormField>
 
-    <VueFormField
-      title="Editable props"
-    >
-      <VueSwitch v-model="$shared.editableProps">
-        Enable
-      </VueSwitch>
-      <template #subtitle>
-        <VueIcon
-          icon="warning"
-          class="medium"
-        />
-        May print warnings in the console
-      </template>
-    </VueFormField>
-
     <VueFormField
       title="Menu Step Scrolling"
     >

packages/app-frontend/src/features/timeline/Timeline.vue

@@ -322,18 +322,20 @@ export default defineComponent({
     <portal to="more-menu">
       <VueSwitch
         v-model="$shared.timelineTimeGrid"
-        class="w-full px-4 py-1 extend-left"
+        class="w-full px-3 py-1 extend-left"
       >
         Time grid
       </VueSwitch>
 
       <VueSwitch
         v-if="supportsScreenshot"
         v-model="$shared.timelineScreenshots"
-        class="w-full px-4 py-1 extend-left"
+        class="w-full px-3 py-1 extend-left"
       >
         Screenshots
       </VueSwitch>
+
+      <div class="border-t border-gray-200 dark:border-gray-800 my-1" />
     </portal>
 
     <AskScreenshotPermission