Style diagram selector

frontend/src/components/Diagram.jsx

@@ -199,15 +199,28 @@ function Diagram() {
   return (
     <div style={{ width: '100vw', height: '100vh' }}>
       <div style={{ position: 'absolute', zIndex: 10, right: 10, top: 10 }}>
-        <select
+        <div style={{ display: 'inline-block', marginRight: 8 }}>
-          value={diagramName || ''}
+          <label style={{ fontWeight: 'bold', marginRight: 4 }}>Diagram: </label>
-          onChange={(e) => setDiagramName(e.target.value)}
+          <select
-          style={{ marginRight: 8, padding: 6 }}
+            value={diagramName || ''}
-        >
+            onChange={(e) => setDiagramName(e.target.value)}
-          {diagramList.map((name) => (
+            style={{
-            <option key={name} value={name}>{name}</option>
+              padding: '6px 10px',
-          ))}
+              borderRadius: '8px',
-        </select>
+              border: '1px solid #aaa',
+              background: 'black',
+              fontWeight: 'bold',
+              minWidth: 120,
+            }}
+          >
+            {diagramList.map((name) => (
+              <option key={name} value={name}>
+                📌 {name}
+              </option>
+            ))}
+          </select>
+</div>
+
         <button
           className="btn"
           onClick={() => {