Refactor headers part of the Scheduler layout to improve rendering

This also fix a resizing issue with the gear icon to command the Scheduler
lsst-ts · Aug 13, 2024 · c8d8051 · c8d8051
1 parent 6a3d341
commit c8d8051
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 21 deletions.
diff --git a/love/src/components/Scheduler/Headers/Headers.jsx b/love/src/components/Scheduler/Headers/Headers.jsx
@@ -160,12 +160,10 @@ export default class Headers extends Component {
     return (
       <div className={styles.container}>
         <div className={styles.leftDivs}>
-          <div className={styles.headersLeft}>
+          <div>
             <SummaryPanel className={styles.summaryPanel1}>
-              <Title className={styles.sumState}>Summary State</Title>
-              <Value>
-                <StatusText status={summaryStateToStyle[schedulerSummaryState]}>{schedulerSummaryState}</StatusText>
-              </Value>
+              <Title>Summary State</Title>
+              <StatusText status={summaryStateToStyle[schedulerSummaryState]}>{schedulerSummaryState}</StatusText>
               <GearIcon className={styles.gearIcon} onClick={() => this.toggleSchedulerCmdOptions()} />
               {showOptions && (
                 <div className={styles.cmdOptions}>
@@ -186,11 +184,9 @@ export default class Headers extends Component {
                   )}
                 </div>
               )}
-              <Value>
-                <StatusText status={schedulerDetailedStateToStyle[schedulerDetailedState]}>
-                  {schedulerDetailedState}
-                </StatusText>
-              </Value>
+              <StatusText status={schedulerDetailedStateToStyle[schedulerDetailedState]}>
+                {schedulerDetailedState}
+              </StatusText>
             </SummaryPanel>
           </div>
           <div className={styles.headersCenter}>

diff --git a/love/src/components/Scheduler/Headers/Headers.module.css b/love/src/components/Scheduler/Headers/Headers.module.css
@@ -32,15 +32,20 @@ this program. If not, see <http://www.gnu.org/licenses/>.
 
 .leftDivs {
   display: flex;
-  justify-content: space-between;
   align-items: center;
 }
 
 .summaryPanel1 {
   display: flex;
-  padding: 20px;
-  width: 100%;
+  padding: 0;
+  padding-left: 20px;
   background: #101f27 !important;
+  max-width: none;
+  min-width: auto;
+}
+
+.summaryPanel1 > * {
+  margin-right: 1em !important;
 }
 
 .summaryPanel2 > span {
@@ -56,20 +61,14 @@ this program. If not, see <http://www.gnu.org/licenses/>.
   padding: 20px;
   width: 100%;
   background-color: var(--second-secondary-background-color) !important;
-  /* background: var(--second-quaternary-background-dimmed-color) !important; */
 }
 
 .summaryTable .title {
   white-space: nowrap !important;
 }
 
-.headersLeft {
-  margin-left: -1em;
-}
-
 .headersCenter {
   display: flex;
-  justify-content: space-between;
   align-items: center;
 }
 
@@ -78,8 +77,8 @@ this program. If not, see <http://www.gnu.org/licenses/>.
 }
 
 .gearIcon {
-  width: 10%;
-  padding-left: 1em;
+  width: 2em;
+  height: 2em;
 }
 
 .gearIcon:hover {