diff --git a/src/app/common/common.less b/src/app/common/common.less
index 3ca716ae..b1e85f4f 100644
--- a/src/app/common/common.less
+++ b/src/app/common/common.less
@@ -1160,7 +1160,6 @@
.status-indicator {
position: relative;
top: 1px;
- margin-right: 3px;
&.error {
color: @term-red;
@@ -1169,6 +1168,6 @@
color: @term-green;
}
&.output {
- color: @text-primary;
+ color: @term-white;
}
}
diff --git a/src/app/workspace/screen/tab.tsx b/src/app/workspace/screen/tab.tsx
index abbd2c6d..ed3980f8 100644
--- a/src/app/workspace/screen/tab.tsx
+++ b/src/app/workspace/screen/tab.tsx
@@ -124,9 +124,11 @@ class ScreenTab extends React.Component<
{screen.name.get()}
-
- {tabIndex}
- {settings}
+
+
+ {tabIndex}
+ {settings}
+
);
diff --git a/src/app/workspace/screen/tabs.less b/src/app/workspace/screen/tabs.less
index 103fb207..1707f8b7 100644
--- a/src/app/workspace/screen/tabs.less
+++ b/src/app/workspace/screen/tabs.less
@@ -6,6 +6,7 @@
&:first-child {
border-radius: 8px 0px 0px 0px;
+ padding-left: 5px;
}
&.color-green,
@@ -261,21 +262,21 @@
display: flex;
flex-direction: row;
height: 3em;
- min-width: 14em;
- max-width: 14em;
+ min-width: 13.6em;
+ max-width: 13.6em;
align-items: center;
cursor: pointer;
+ padding: 0 8px 0 8px;
.front-icon {
- margin: 0 12px;
+ margin-right: 5px;
.svg-icon svg {
- width: 14px;
- height: 14px;
+ width: 14px;
+ height: 14px;
}
.fa-icon {
font-size: 16px;
}
-
}
.tab-name {
@@ -293,23 +294,32 @@
}
}
+ // Only one of these will be visible at a time
.end-icon {
- margin: 0 6px;
- .icon {
- margin: 0;
- padding: 0 6px;
- width: 0;
- border-radius: 50%;
+ // This makes the calculations below easier since we don't need to account for the right margin on the parent tab.
+ margin: 0 -8px 0 0;
+ .end-icon-inner {
+ & > div {
+ text-align: center;
+ align-items: center;
+ & > * {
+ margin: auto auto;
+ }
+ width: 20px;
+ }
}
.status-indicator {
display: block;
+ // The status indicator is a little shorter than the text; this raises it up a bit so it's more centered vertically
+ padding-bottom: 1px;
+ margin-top: -1px;
}
.tab-gear {
display: none;
- // Account for the fact that the ellipsis icon is a little taller than the other icons
- margin-bottom: -2px;
+ .icon {
+ border-radius: 50%;
+ }
}
-
.tab-index {
display: none;
font-size: 0.9em;
diff --git a/src/model/model.ts b/src/model/model.ts
index 6e2bd407..876cf740 100644
--- a/src/model/model.ts
+++ b/src/model/model.ts
@@ -4056,7 +4056,7 @@ class Model {
this.inputModel.setOpenAICmdInfoChat(update.openaicmdinfochat);
}
if ("screenstatusindicator" in update) {
- this.getScreenById_single(update.screenstatusindicator.screenid).setStatusIndicator(update.screenstatusindicator.status);
+ this.getScreenById_single(update.screenstatusindicator.screenid)?.setStatusIndicator(update.screenstatusindicator.status);
}
// console.log("run-update>", Date.now(), interactive, update);
}