0.10.2-16 Skripte

frontend/src/pages/DashboardPage.jsx

@@ -3080,7 +3080,7 @@ export default function DashboardPage({
 
           {queueCatalog.scripts.length > 0 ? (
             <div className="queue-insert-section">
-              <strong><i className="pi pi-code" /> Skript</strong>
+              <span className="queue-insert-section-label"><i className="pi pi-code" /> Skript</span>
               <div className="queue-insert-options">
                 {queueCatalog.scripts.map((script) => (
                   <button
@@ -3098,7 +3098,7 @@ export default function DashboardPage({
 
           {queueCatalog.chains.length > 0 ? (
             <div className="queue-insert-section">
-              <strong><i className="pi pi-link" /> Skriptkette</strong>
+              <span className="queue-insert-section-label"><i className="pi pi-link" /> Skriptkette</span>
               <div className="queue-insert-options">
                 {queueCatalog.chains.map((chain) => (
                   <button
@@ -3115,23 +3115,27 @@ export default function DashboardPage({
           ) : null}
 
           <div className="queue-insert-section">
-            <strong><i className="pi pi-clock" /> Warten</strong>
-            <div className="queue-insert-wait-row">
+            <span className="queue-insert-section-label"><i className="pi pi-desktop" /> System</span>
+            <div className="queue-insert-options">
+              <div className="queue-insert-system-block">
+                <span className="queue-insert-system-name"><i className="pi pi-clock" /> Warten</span>
                 <InputNumber
                   value={insertWaitSeconds}
                   onValueChange={(e) => setInsertWaitSeconds(e.value ?? 30)}
                   min={1}
                   max={3600}
                   suffix="s"
-                style={{ width: '7rem' }}
+                  inputStyle={{ width: '4.5rem' }}
                 />
                 <Button
-                label="Einfügen"
                   icon="pi pi-check"
+                  size="small"
+                  title="Einfügen"
                   onClick={() => void handleAddQueueEntry('wait', { waitSeconds: insertWaitSeconds })}
                 />
               </div>
             </div>
+          </div>
 
           {queueCatalog.scripts.length === 0 && queueCatalog.chains.length === 0 ? (
             <small className="muted-inline">Keine Skripte oder Ketten konfiguriert. In den Settings anlegen.</small>

frontend/src/styles/app.css

@@ -1011,6 +1011,14 @@ body {
   border-top: none;
 }
 
+.queue-insert-section-label {
+  font-weight: 600;
+  font-size: 0.88rem;
+  display: flex;
+  align-items: center;
+  gap: 0.35rem;
+}
+
 .queue-insert-options {
   display: flex;
   flex-wrap: wrap;
@@ -1023,8 +1031,8 @@ body {
   border-radius: 0.35rem;
   color: inherit;
   cursor: pointer;
-  font-size: 0.82rem;
-  padding: 0.3rem 0.65rem;
+  font-size: 0.79rem;
+  padding: 0.2rem 0.5rem;
   transition: background 0.12s;
 }
 
@@ -1033,10 +1041,22 @@ body {
   border-color: var(--rip-primary, #6366f1);
 }
 
-.queue-insert-wait-row {
+.queue-insert-system-block {
   display: flex;
   align-items: center;
-  gap: 0.5rem;
+  gap: 0.45rem;
+  background: var(--rip-surface);
+  border: 1px solid var(--rip-border);
+  border-radius: 0.35rem;
+  padding: 0.2rem 0.5rem;
+}
+
+.queue-insert-system-name {
+  font-size: 0.79rem;
+  display: flex;
+  align-items: center;
+  gap: 0.3rem;
+  white-space: nowrap;
 }
 
 .pipeline-queue-item.queued.dragging {