fix: button hover flicker, SVG icons for text glyphs, and larger flask in extension icons

src/webview/components/icons/DotIcon.tsx

@@ -0,0 +1,8 @@
+import React from "react";
+const DotIcon = () => (
+  <svg width="6" height="6" viewBox="0 0 6 6" fill="currentColor">
+    <circle cx="3" cy="3" r="3" />
+  </svg>
+);
+
+export default DotIcon;

src/webview/components/icons/WarningIcon.tsx

@@ -1,12 +1,17 @@
 import React from "react";
-const WarningIcon = () => (
+type WarningIconProps = {
+  size?: number;
+  className?: string;
+};
+const WarningIcon = ({ size = 48, className }: WarningIconProps) => (
   <svg
-    width="48"
-    height="48"
+    width={size}
+    height={size}
     viewBox="0 0 24 24"
     fill="none"
     stroke="currentColor"
     strokeWidth="1.5"
+    className={className}
   >
     <circle cx="12" cy="12" r="10"></circle>
     <line x1="12" y1="8" x2="12" y2="12"></line>

src/webview/editor/EnvironmentsTab.tsx

@@ -73,7 +73,10 @@ const EnvironmentsTab: React.FC<EnvironmentsTabProps> = ({
         </div>
         {envs.length > 0 && (
           <p className="env-list-hint">
-            ✓ = active &nbsp;·&nbsp; double-click name to rename
+            <span className="env-list-hint-icon">
+              <CheckIcon />
+            </span>{" "}
+            = active &nbsp;·&nbsp; double-click name to rename
           </p>
         )}
         {envs.length === 0 ? (

src/webview/editor/styles.css

@@ -159,7 +159,6 @@ body {
 }
 
 .save-btn.dirty:hover {
-  transform: translateY(-2px);
   box-shadow: 0 8px 24px var(--restlab-accent-glow);
 }
 
@@ -771,6 +770,10 @@ fieldset.form-section {
   text-align: center;
   letter-spacing: 0.02em;
 }
+.env-list-hint-icon {
+  display: inline-flex;
+  vertical-align: -1px;
+}
 .env-section-label {
   font-size: 11px;
   font-weight: 600;

src/webview/history/styles.css

@@ -464,7 +464,6 @@ body {
   background: var(--restlab-gradient);
   border-color: transparent;
   color: #ffffff;
-  transform: translateY(-1px);
   box-shadow: 0 4px 12px var(--restlab-accent-glow);
 }
 

src/webview/request/FormFieldEditor.tsx

@@ -6,6 +6,7 @@ import PlusIcon from "../components/icons/PlusIcon";
 import TextIcon from "../components/icons/TextIcon";
 import TrashIcon from "../components/icons/TrashIcon";
 import UploadIcon from "../components/icons/UploadIcon";
+import WarningIcon from "../components/icons/WarningIcon";
 import { hasFileFields } from "../helpers/helper";
 import { useRequestContext } from "./RequestContext";
 
@@ -107,7 +108,8 @@ const FormFieldEditor = () => {
 
       {hasFileFields(config.formData) && (
         <p className="file-warning">
-          ⚠️ File uploads require multipart/form-data.
+          <WarningIcon size={14} className="file-warning-icon" />
+          File uploads require multipart/form-data.
         </p>
       )}
     </div>

src/webview/request/RequestEditor.tsx

@@ -1,6 +1,8 @@
 import React, { useEffect, useRef, useState } from "react";
 import Tooltip from "../components/Tooltip";
+import ChevronIcon from "../components/icons/ChevronIcon";
 import CodeIcon from "../components/icons/CodeIcon";
+import DotIcon from "../components/icons/DotIcon";
 import MoreActionIcon from "../components/icons/MoreActionIcon";
 import SaveIcon from "../components/icons/SaveIcon";
 import SendIcon from "../components/icons/SendIcon";
@@ -195,7 +197,15 @@ const RequestEditorContent: React.FC = () => {
             )}
             {hasVars && resolvedUrl && (
               <>
-                <span style={{ opacity: 0.5, margin: "0 6px" }}>→</span>
+                <span
+                  style={{
+                    opacity: 0.5,
+                    margin: "0 6px",
+                    display: "inline-flex",
+                  }}
+                >
+                  <ChevronIcon />
+                </span>
                 <code style={{ color: "rgba(56,189,248,0.8)" }}>
                   {resolvedUrl}
                 </code>
@@ -257,7 +267,9 @@ const RequestEditorContent: React.FC = () => {
               >
                 Auth
                 {config.auth !== undefined && (
-                  <span className="badge">•</span>
+                  <span className="badge">
+                    <DotIcon />
+                  </span>
                 )}
               </button>
               <button

src/webview/request/styles.css

@@ -319,13 +319,14 @@ body {
   left: 100%;
 }
 
+/* No translate on hover: moving the button out from under the cursor at its
+   edge toggles :hover on and off, causing flicker and missed clicks. */
 .send-btn:hover:not(:disabled) {
-  transform: translateY(-2px);
   box-shadow: 0 8px 24px var(--restlab-accent-glow);
 }
 
 .send-btn:active:not(:disabled) {
-  transform: translateY(0);
+  box-shadow: 0 2px 8px var(--restlab-accent-glow);
 }
 
 .send-btn:disabled {
@@ -359,7 +360,6 @@ body {
 .save-btn:hover:not(:disabled) {
   background: rgba(255, 255, 255, 0.06);
   border-color: var(--restlab-accent);
-  transform: translateY(-1px);
 }
 
 .save-btn.unsaved {
@@ -484,7 +484,6 @@ body {
   background: var(--restlab-gradient);
   border-color: transparent;
   color: #ffffff;
-  transform: translateY(-1px);
   box-shadow: 0 4px 16px var(--restlab-accent-glow);
 }
 
@@ -522,7 +521,6 @@ body {
   background: var(--restlab-accent-subtle);
   border-color: var(--restlab-accent);
   color: var(--restlab-accent);
-  transform: translateY(-1px);
 }
 
 .layout-toggle-btn svg {
@@ -1326,7 +1324,6 @@ fieldset.form-section {
   background: var(--restlab-accent-subtle);
   border-color: var(--restlab-accent);
   color: var(--restlab-accent);
-  transform: translateY(-1px);
 }
 
 .editor-action-btn:disabled {
@@ -1530,6 +1527,9 @@ fieldset.form-section {
 
 /* File Warning */
 .file-warning {
+  display: flex;
+  align-items: center;
+  gap: 6px;
   margin-top: 12px;
   padding: 8px 12px;
   font-size: 12px;
@@ -1538,6 +1538,10 @@ fieldset.form-section {
   border-radius: 6px;
 }
 
+.file-warning-icon {
+  flex-shrink: 0;
+}
+
 /* Response Section */
 .response-section {
   padding: var(--rl-sp0) var(--rl-sp2) var(--rl-sp2);
@@ -1655,7 +1659,6 @@ fieldset.form-section {
   background: var(--restlab-gradient);
   border-color: transparent;
   color: #ffffff;
-  transform: translateY(-1px);
   box-shadow: 0 4px 12px var(--restlab-accent-glow);
 }
 

src/webview/sidebar/sidebar.css

@@ -386,7 +386,7 @@ body {
   position: relative;
   overflow: hidden;
   white-space: nowrap;
-  transition: transform 0.2s ease, box-shadow 0.2s ease;
+  transition: box-shadow 0.2s ease;
 }
 .btn-primary span {
   overflow: hidden;
@@ -405,8 +405,8 @@ body {
   transition: left 0.5s ease;
 }
 .btn-primary:hover::before { left: 100%; }
-.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 8px 24px var(--restlab-accent-glow); }
-.btn-primary:active { transform: translateY(0); }
+.btn-primary:hover { box-shadow: 0 8px 24px var(--restlab-accent-glow); }
+.btn-primary:active { box-shadow: 0 2px 8px var(--restlab-accent-glow); }
 .btn-primary:focus { outline: 2px solid var(--restlab-accent); outline-offset: 2px; }
 .btn-primary svg { flex-shrink: 0; width: var(--rl-icon); height: var(--rl-icon); }
 

src/webview/tailwind.css

@@ -314,12 +314,11 @@
   }
 
   .btn-primary:hover {
-    transform: translateY(-2px);
     box-shadow: 0 8px 24px var(--restlab-accent-glow);
   }
 
   .btn-primary:active {
-    transform: translateY(0);
+    box-shadow: 0 2px 8px var(--restlab-accent-glow);
   }
 
   .btn-primary:focus {