tg app fix sizes

src/components/settings/CategoriesList.vue

@@ -5,24 +5,25 @@ import {useToast} from "primevue/usetoast";
 import {Divider} from "primevue";
 import {onMounted, ref} from "vue";
 import {Category} from "@/models/category";
-import {categoriesService} from "@/services/categories-service";
 import {useToolbarStore} from "@/stores/toolbar-store";
 import {useRouter} from "vue-router";
+import {useCategoriesStore} from "@/stores/categories-store";
 
 const toast = useToast()
 const spaceStore = useSpaceStore()
+const categoryStore = useCategoriesStore()
 const toolbar = useToolbarStore()
 const router = useRouter()
 
 
-
 const categories = ref<Category[]>([])
 
 const fetchData = async () => {
   try {
     if (spaceStore.selectedSpaceId !== null) {
       let spaceId = spaceStore.selectedSpaceId!!
-      categories.value = await categoriesService.fetchCategories(spaceId)
+      await categoryStore.fetchCategories(spaceId)
+      categories.value = categoryStore.categories
     }
   } catch (error: Error) {
     toast.add({
@@ -39,8 +40,7 @@ const toCreation = () => {
 
 onMounted(async () => {
   await fetchData()
-  toolbar.registerHandler('createCategory', () => {
-    console.log("create cateogiry")
+  toolbar.registerHandler('openCategoryCreation', () => {
     toCreation()
   })
 })
@@ -52,12 +52,15 @@ onMounted(async () => {
 
 
   <div class="card">
-    <div v-for="key in categories.keys()" :key="categories[key].id" @click="router.push(`/categories/${categories[key].id}/edit`)"
+    <div v-for="key in categories.keys()" :key="categories[key].id"
+         @click="router.push(`/categories/${categories[key].id}/edit`)"
          class="flex flex-col  w-full gap-0 pl-5  items-start justify-items-center font-bold ">
       <div class="flex-row  w-full items-center justify-between">
-        <div class="flex-col items-start">
-          <div class="flex-row"> {{ categories[key].icon }} {{ categories[key].name }}</div>
-          <div class="flex flex-row text-sm">{{ categories[key].description }}</div>
+        <div class="flex-row items-center gap-2 ">
+          <span class="text-3xl"> {{ categories[key].icon }}</span>
+          <div class="flex-col !font-bold "> {{ categories[key].name }}
+            <div class="flex flex-row text-sm">{{ categories[key].description }}</div>
+          </div>
         </div>
         <i class="pi pi-angle-right !font-extralight"/>
       </div>