refactor: use grid for proxy list layout

1 files changed, 27 insertions, 8 deletions

diff --git a/src/components/proxies/Proxy.module.css b/src/components/proxies/Proxy.module.css
index 089b686..a858e88 100644
--- a/src/components/proxies/Proxy.module.css
+++ b/src/components/proxies/Proxy.module.css
@@ -4,6 +4,10 @@
   border-radius: 8px;
   overflow: hidden;
 
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+
   max-width: 280px;
   @media (--breakpoint-not-small) {
     min-width: 200px;
@@ -19,6 +23,13 @@
   &.error {
     opacity: 0.5;
   }
+  &.selectable {
+    transition: transform 0.2s ease-in-out;
+    cursor: pointer;
+    &:hover {
+      transform: translateY(-2px);
+    }
+  }
 }
 
 .proxyType {
@@ -37,20 +48,28 @@
 
 .proxyName {
   width: 100%;
-  overflow: hidden;
-  text-overflow: ellipsis;
   margin-bottom: 5px;
   font-size: 0.85em;
   @media (--breakpoint-not-small) {
-    font-size: 1.1em;
+    font-size: 1em;
   }
 }
 
 .proxySmall {
-  .now {
-    outline: pink solid 1px;
+  width: 13px;
+  height: 13px;
+  border-radius: 50%;
+  border: 1px solid var(--color-background);
+
+  &.now {
+    border-color: var(--color-text-secondary);
+  }
+
+  &.selectable {
+    transition: transform 0.1s ease-in-out;
+    cursor: pointer;
+    &:hover {
+      transform: scale(1.2);
+    }
   }
-  width: 12px;
-  height: 12px;
-  border-radius: 8px;
 }