chore: style

Author: antfu

src/components/GroupList.vue

@@ -3,23 +3,21 @@ import { groups } from '~/logic'
 </script>
 
 <template>
-  <div class="flex flex-wrap gap-x-2 gap-y-2">
-    <div>
-      <div class="subheader">
-        Suggested Shortcuts
-        <sup class="opacity-50 text-sm">{{ groups.length }}</sup>
-      </div>
-      <div class="flex flex-col space-y-4">
-        <div
-          v-for="shortcut of groups"
-          :key="shortcut.class"
-          class="p-4 rounded-md bg-gray-400 bg-opacity-5"
-        >
-          <GroupLabel
-            :name="shortcut.class"
-            :count="shortcut.uses.length.toString()"
-          />
-        </div>
+  <div class="mb-5">
+    <div class="subheader">
+      Suggested Shortcuts
+      <sup class="opacity-50 text-sm">{{ groups.length }}</sup>
+    </div>
+    <div class="flex flex-col space-y-4">
+      <div
+        v-for="shortcut of groups"
+        :key="shortcut.class"
+        class="p-4 rounded-md bg-gray-400 bg-opacity-5"
+      >
+        <GroupLabel
+          :name="shortcut.class"
+          :count="shortcut.uses.length.toString()"
+        />
       </div>
     </div>
   </div>

src/logic/state.ts

@@ -94,7 +94,7 @@ export const categories = computed(() => {
 
 export const categorized = computed(() => {
   if (!data.value)
-    return {}
+    return []
 
   return categories.value
     .map(i => ({

src/pages/index.vue

@@ -9,7 +9,7 @@ import { isDemo } from '~/env'
     <TopUtilities class="pb-2" />
     <ColorPalette class="pb-2" />
     <UtilitiesUsage class="pb-2" />
-    <GroupList />
+    <GroupList class="pb-2" />
     <FilesList class="pb-2" />
   </div>
 </template>