Make all proxy items same width

3 files changed, 35 insertions, 3 deletions

diff --git a/src/components/Root.scss b/src/components/Root.scss
index dfecea2..5fb5ffd 100644
--- a/src/components/Root.scss
+++ b/src/components/Root.scss
@@ -73,6 +73,7 @@ body {
   --color-background: #202020;
   --color-background2: rgba(32, 32, 32, 0.3);
   --color-bg-card: #2d2d2d;
+  --card-hover-border-lightness: 30%;
   --color-text: #ddd;
   --color-text-secondary: #ccc;
   --color-text-highlight: #fff;
@@ -100,6 +101,7 @@ body {
   --color-background: #eee;
   --color-background2: rgba(240, 240, 240, 0.3);
   --color-bg-card: #fafafa;
+  --card-hover-border-lightness: 80%;
   --color-text: #222;
   --color-text-secondary: #646464;
   --color-text-highlight: #040404;
diff --git a/src/components/proxies/Proxy.module.scss b/src/components/proxies/Proxy.module.scss
index 044722f..3c4503f 100644
--- a/src/components/proxies/Proxy.module.scss
+++ b/src/components/proxies/Proxy.module.scss
@@ -15,7 +15,7 @@
     border: 1px solid var(--color-focus-blue);
   }
 
-  max-width: 280px;
+  max-width: 200px;
   @media (--breakpoint-not-small) {
     min-width: 200px;
     border-radius: 10px;
@@ -34,7 +34,7 @@
     transition: transform 0.2s ease-in-out;
     cursor: pointer;
     &:hover {
-      transform: translateY(-2px);
+      border-color: hsl(0deg, 0%, var(--card-hover-border-lightness));
     }
   }
 }
@@ -58,6 +58,9 @@
   width: 100%;
   margin-bottom: 5px;
   font-size: 0.85em;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 
 .proxySmall {
diff --git a/src/components/proxies/Proxy.tsx b/src/components/proxies/Proxy.tsx
index 753a00c..b943bcc 100644
--- a/src/components/proxies/Proxy.tsx
+++ b/src/components/proxies/Proxy.tsx
@@ -1,3 +1,4 @@
+import { TooltipPopup, useTooltip } from '@reach/tooltip';
 import cx from 'clsx';
 import * as React from 'react';
 import { keyCodes } from 'src/misc/keycode';
@@ -107,6 +108,28 @@ function formatProxyType(t: string) {
   return t;
 }
 
+const positionProxyNameTooltip = (triggerRect: { left: number; top: number }) => {
+  return {
+    left: triggerRect.left + window.scrollX - 5,
+    top: triggerRect.top + window.scrollY - 38,
+  };
+};
+
+function ProxyNameTooltip({ children, label, 'aria-label': ariaLabel }) {
+  const [trigger, tooltip] = useTooltip();
+  return (
+    <>
+      {React.cloneElement(children, trigger)}
+      <TooltipPopup
+        {...tooltip}
+        label={label}
+        aria-label={ariaLabel}
+        position={positionProxyNameTooltip}
+      />
+    </>
+  );
+}
+
 function ProxyImpl({ now, name, proxy, latency, isSelectable, onClick }: ProxyProps) {
   const color = useMemo(() => getLabelColor(latency), [latency]);
   const doSelect = React.useCallback(() => {
@@ -134,7 +157,11 @@ function ProxyImpl({ now, name, proxy, latency, isSelectable, onClick }: ProxyPr
       onKeyDown={handleKeyDown}
       role={isSelectable ? 'menuitem' : ''}
     >
-      <div className={s0.proxyName}>{name}</div>
+      <div className={s0.proxyName}>
+        <ProxyNameTooltip label={name} aria-label={'proxy name: ' + name}>
+          <span>{name}</span>
+        </ProxyNameTooltip>
+      </div>
       <div className={s0.row}>
         <span className={s0.proxyType} style={{ opacity: now ? 0.6 : 0.2 }}>
           {formatProxyType(proxy.type)}