fix: fix duration checkbox

cryostatio · Aug 8, 2024 · dc92e6a · dc92e6a
1 parent 176565d
commit dc92e6a
Show file tree

Hide file tree

Showing 4 changed files with 8 additions and 1 deletion.
diff --git a/src/app/Recordings/ActiveRecordingsTable.tsx b/src/app/Recordings/ActiveRecordingsTable.tsx
@@ -799,6 +799,7 @@ const ActiveRecordingsToolbar: React.FC<ActiveRecordingsToolbarProps> = (props)
           updateFilters={props.updateFilters}
           breakpoint={'xl'}
         />
+        <ToolbarItem variant="separator" />
         <ToolbarGroup style={{ alignSelf: 'start' }} variant="button-group">
           <ToolbarItem variant="overflow-menu">
             <OverflowMenu

diff --git a/src/app/Recordings/ArchivedRecordingsTable.tsx b/src/app/Recordings/ArchivedRecordingsTable.tsx
@@ -742,6 +742,7 @@ const ArchivedRecordingsToolbar: React.FC<ArchivedRecordingsToolbarProps> = (pro
           updateFilters={props.updateFilters}
           breakpoint={'xl'}
         />
+        <ToolbarItem variant="separator" />
         <ToolbarGroup variant="button-group" style={{ alignSelf: 'start' }}>
           <ToolbarItem variant="overflow-menu">
             <OverflowMenu

diff --git a/src/app/Recordings/Filters/DurationFilter.tsx b/src/app/Recordings/Filters/DurationFilter.tsx
@@ -61,8 +61,9 @@ export const DurationFilter: React.FC<DurationFilterProps> = ({
           onKeyDown={handleEnterKey}
         />
       </FlexItem>
-      <FlexItem>
+      <FlexItem alignSelf={{ default: 'alignSelfCenter' }}>
         <Checkbox
+          className="duration-filter__continuous-checkbox"
           label="Continuous"
           id="continuous-checkbox"
           isChecked={isContinuous}

diff --git a/src/app/app.css b/src/app/app.css
@@ -76,6 +76,10 @@ html, body, #root {
   --pf-v5-c-chip__text--MaxWidth: 100ch;
 }
 
+.duration-filter__continuous-checkbox .pf-v5-c-check__label {
+  align-self: center;
+}
+
 .recording-table-outer-container {
   height: 67.3vh;
 }