fix: better styles

Author: astandrik

src/components/FixedHeightQuery/FixedHeightQuery.scss

@@ -18,15 +18,17 @@
 
         // Target the ReactSyntaxHighlighter pre element
         pre {
-            display: flex !important;
+            display: box !important;
+            -webkit-box-orient: vertical !important;
+            -webkit-line-clamp: var(--line-clamp, 4) !important;
             overflow: hidden !important;
-            align-items: center !important;
 
             height: 100% !important;
             margin: 0 !important;
             padding: 8px !important;
 
             white-space: pre-wrap !important;
+            text-overflow: ellipsis !important;
             word-break: break-word !important;
         }
 

src/containers/Tenant/Diagnostics/TopQueries/columns/columns.tsx

@@ -33,7 +33,7 @@ const queryTextColumn: Column<KeyValueRow> = {
     header: QUERIES_COLUMNS_TITLES.QueryText,
     render: ({row}) => (
         <div className={b('query')}>
-            <FixedHeightQuery value={row.QueryText?.toString()} lines={4} hasClipboardButton />
+            <FixedHeightQuery value={row.QueryText?.toString()} lines={3} hasClipboardButton />
         </div>
     ),
     width: 500,