+analytics update

src/components/analytics/AnalyticsView.vue

@@ -237,18 +237,18 @@ onMounted(async () => {
 
 
             <div v-if="isChartOpen"
-                 class="grid grid-cols-1 sm:grid-cols-6 w-full items-start justify-items-start">
+                 class="grid grid-cols-1 lg:grid-cols-6 w-full items-start justify-items-start">
               <!-- Список категорий -->
-              <div class="sm:col-span-1 w-full h-56 sm:h-[42rem] p-2 overflow-y-scroll outline outline-1 outline-gray-300 rounded-lg">
+              <div class="sm:col-span-1 w-full h-56 lg:h-[42rem] p-2 overflow-y-scroll outline outline-1 outline-gray-300 rounded-lg">
 <!--                <IconField>-->
 
 <!--                  <InputText v-model="filterText" placeholder="Поиск категории"/>-->
 <!--                  <InputIcon class="pi pi-search"/>-->
 <!--                </IconField>-->
-                <ul class="w-5/6">
+                <ul class=" min-w-fit w-full">
 
                   <li v-for="category in categoriesCatalog"
-                      class="tpx-4 py-2 hover:bg-blue-50 rounded-md "
+                      class="px-2 py-2 hover:bg-blue-50 rounded-md line-clamp-1 w-full"
                       :class="selectedCategory.id == category.id? '!bg-emerald-50 text-emerald-700': '' " @click="selectedCategory=category">
                     {{ category.icon }} {{ category.name }}
                   </li>
@@ -258,12 +258,12 @@ onMounted(async () => {
               <!-- Контейнер для графика с горизонтальной прокруткой -->
               <div class="sm:col-span-5 overflow-x-auto w-full">
                 <!-- «Растяжка», чтобы было за что «скроллить» -->
-                <div class="min-w-[550px] ">
+                <div class="min-w-[550px] md:min-w-[650px] lg:min-w-[850px]">
                   <Chart
                       type="line"
                       :data="preparedChartData"
                       :options="chartOptions"
-                      class="h-64 sm:h-full sm:w-full "
+                      class="h-72 sm:h-full sm:w-full "
                   />
                 </div>
               </div>