From 77b57a68edb90826822db6650031cbccf1bbff44 Mon Sep 17 00:00:00 2001
From: Lyubov Voloshko <lyubov@voloshko.com>
Date: Wed, 10 Sep 2025 20:39:55 +0300
Subject: [PATCH] home page: fix grid layouts responsiveness

---
 .../own-connections.component.css             | 28 +++++++++++--------
 1 file changed, 16 insertions(+), 12 deletions(-)

diff --git a/frontend/src/app/components/connections-list/own-connections/own-connections.component.css b/frontend/src/app/components/connections-list/own-connections/own-connections.component.css
index 4f3747bf9..2267c5e1b 100644
--- a/frontend/src/app/components/connections-list/own-connections/own-connections.component.css
+++ b/frontend/src/app/components/connections-list/own-connections/own-connections.component.css
@@ -39,16 +39,22 @@
 .supportedDatabases {
     list-style: none;
     display: grid;
-    grid-template-columns: repeat(5, minmax(0, 1fr));
+    grid-template-columns: repeat(auto-fit, minmax(142px, 1fr));
     grid-gap: 20px;
-    justify-items: center;
     margin-top: 24px;
+    width: 77%;
+}
+
+@media (width <= 600px) {
+    .supportedDatabases {
+        width: 100%;
+    }
 }
 
 .addConnectionLink {
     display: flex;
     align-items: center;
-    gap: 12px;
+    gap: 8px;
     border-radius: 4px;
     box-shadow:
         0px 1px 3px 0px rgba(0, 0, 0, 0.2),
@@ -57,10 +63,9 @@
     color: inherit;
     font-weight: 600;
     height: 48px;
-    padding: 0 6px;
+    padding-left: 4px;
     text-decoration: none;
     transition: box-shadow 200ms, background 200ms, border 200ms;
-    min-width: 154px;
 }
 
 .addConnectionLink:hover {
@@ -188,22 +193,21 @@
 
 .connections {
     list-style: none;
-    display: flex;
-    flex-wrap: wrap;
-    justify-content: center;
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
     gap: 20px;
     margin-top: 24px;
     width: 100%;
 }
 
-@media (width <= 600px) {
+/* @media (width <= 600px) {
     .connections {
         flex-direction: column;
         flex-wrap: nowrap;
     }
-}
+} */
 
-.connectionItem {
+/* .connectionItem {
     flex: 0 0 calc((100% - 40px)/3);
     max-width: calc((100% - 40px)/3);
 }
@@ -213,7 +217,7 @@
         flex: initial;
         max-width: 100%;
     }
-}
+} */
 
 .connection {
     display: flex;