From 5996c9e2126a100f1962aec861810d0cbeacfb7e Mon Sep 17 00:00:00 2001
From: Gleb Korotkiy <korotkiygs@yandex.com>
Date: Sun, 21 Jun 2026 10:17:45 +0300
Subject: [PATCH] fix: adjust region ranking table layout

---
 src/views/ReportsView.vue | 58 ++++++++++++++++++---------------------
 1 file changed, 26 insertions(+), 32 deletions(-)

diff --git a/src/views/ReportsView.vue b/src/views/ReportsView.vue
index 205a298..0ea47dd 100644
--- a/src/views/ReportsView.vue
+++ b/src/views/ReportsView.vue
@@ -49,10 +49,10 @@ const reportRows = computed<ReportsTableRows>(() =>
 const reportColumns = computed<ReportsTableColumns>(() => [
   {
     accessorKey: 'rank',
-    align: 'right',
+    align: 'center',
     header: '№',
     sortable: false,
-    width: 48,
+    width: 44,
   },
   {
     accessorKey: 'region_name',
@@ -87,11 +87,7 @@ const isReportsTableLoading = computed(
 </script>
 
 <template>
-  <section class="reports-page" aria-labelledby="reports-page-title">
-    <header class="reports-page-header">
-      <h1 id="reports-page-title" class="reports-page-title">Рейтинг субъектов РФ</h1>
-    </header>
-
+  <section class="reports-page" aria-label="Рейтинг субъектов РФ">
     <DataTable
       :class="[
         'reports-page-table',
@@ -116,25 +112,7 @@ const isReportsTableLoading = computed(
 
 <style scoped>
 .reports-page {
-  display: grid;
   min-width: 0;
-  gap: 28px;
-}
-
-.reports-page-header {
-  display: flex;
-  min-height: 44px;
-  align-items: center;
-}
-
-.reports-page-title {
-  margin: 0;
-  color: var(--Infographic-Main-Dark-Blue, #022456);
-  font-family: 'Clear Sans', var(--font-sans, ui-sans-serif, system-ui, sans-serif);
-  font-size: 24px;
-  line-height: 28px;
-  font-weight: 700;
-  letter-spacing: 0;
 }
 
 .reports-page-table {
@@ -142,6 +120,12 @@ const isReportsTableLoading = computed(
   --reports-page-table-scrollbar-right-offset: -68px;
 }
 
+.reports-page-table :deep(.gisp-data-table) {
+  border: 0;
+  border-radius: 0;
+  background: transparent;
+}
+
 .reports-page-table :deep(.gisp-data-table__body-scroll) {
   height: min(680px, calc(100dvh - 300px));
   max-height: min(680px, calc(100dvh - 300px));
@@ -172,9 +156,23 @@ const isReportsTableLoading = computed(
 .reports-page-table :deep(.gisp-data-table__table col:first-child),
 .reports-page-table :deep(.gisp-data-table__header-cell:first-child),
 .reports-page-table :deep(.gisp-data-table__cell:first-child) {
-  width: 48px !important;
-  min-width: 48px !important;
-  max-width: 48px !important;
+  width: 44px !important;
+  min-width: 44px !important;
+  max-width: 44px !important;
+}
+
+.reports-page-table :deep(.gisp-data-table__header-cell:first-child),
+.reports-page-table :deep(.gisp-data-table__cell:first-child) {
+  padding-right: 0 !important;
+  padding-left: 0 !important;
+  text-align: center !important;
+}
+
+.reports-page-table
+  :deep(.gisp-data-table__header-cell:first-child .gisp-data-table__header-content),
+.reports-page-table :deep(.gisp-data-table__cell:first-child .gisp-data-table__cell-text) {
+  justify-content: center;
+  text-align: center;
 }
 
 .reports-page-table :deep(.gisp-data-table__table col:nth-child(n + 3)),
@@ -238,10 +236,6 @@ const isReportsTableLoading = computed(
 }
 
 @media (max-width: 640px) {
-  .reports-page {
-    gap: 20px;
-  }
-
   .reports-page-table {
     --reports-page-table-scrollbar-right-offset: -36px;
   }