From dc92e6a4fc395bfff1a13f4f7946b7bc06d21550 Mon Sep 17 00:00:00 2001
From: Thuan Vo <thuan.votann@gmail.com>
Date: Thu, 8 Aug 2024 15:35:49 -0700
Subject: [PATCH] fix: fix duration checkbox

---
 src/app/Recordings/ActiveRecordingsTable.tsx   | 1 +
 src/app/Recordings/ArchivedRecordingsTable.tsx | 1 +
 src/app/Recordings/Filters/DurationFilter.tsx  | 3 ++-
 src/app/app.css                                | 4 ++++
 4 files changed, 8 insertions(+), 1 deletion(-)

diff --git a/src/app/Recordings/ActiveRecordingsTable.tsx b/src/app/Recordings/ActiveRecordingsTable.tsx
index 2be080167a..c8f4f975b7 100644
--- 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
index d094bf2f16..6fab53ea71 100644
--- 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
index b88be56ee8..c56f28d804 100644
--- 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
index 4073bac000..a73c85bff3 100644
--- 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;
 }