From 99ec2591fb093b9bcbf4d83a693f32aa4d85d200 Mon Sep 17 00:00:00 2001 From: Arnei Date: Fri, 4 Sep 2026 14:35:45 +0200 Subject: [PATCH 1/9] Deduplicate repeated dropdown menu styles The base and .small dropdown menus repeated the same properties; extracted them into a shared mixin. This commit was AI generated --- src/styles/components/_dropdowns.scss | 17 ++++++----------- 1 file changed, 6 insertions(+), 11 deletions(-) diff --git a/src/styles/components/_dropdowns.scss b/src/styles/components/_dropdowns.scss index 1afbad781f..5adf9b4d58 100644 --- a/src/styles/components/_dropdowns.scss +++ b/src/styles/components/_dropdowns.scss @@ -66,7 +66,7 @@ margin-right: 10px; } - > ul { + @mixin dropdown-menu-base { position: absolute; transition: all 200ms; background: variables.$off-white; @@ -77,6 +77,10 @@ opacity: 1; pointer-events: auto; z-index: variables.$max-z + 10; + } + + > ul { + @include dropdown-menu-base; top: 100%; left: -1px; right: -1px; @@ -141,16 +145,7 @@ } > ul { - position: absolute; - transition: all 200ms; - background: variables.$off-white; - list-style: none; - border-bottom-left-radius: variables.$main-border-radius; - border-bottom-right-radius: variables.$main-border-radius; - border: variables.$thin-border-stroke variables.$main-border-color; - opacity: 1; - pointer-events: auto; - z-index: variables.$max-z + 10; + @include dropdown-menu-base; > li { color: variables.$medium-prim-color; From 5d4e54a36dbfaee4759fcea0d8277cb7f0e4ab6b Mon Sep 17 00:00:00 2001 From: Arnei Date: Fri, 4 Sep 2026 14:35:51 +0200 Subject: [PATCH 2/9] Flatten deeply nested action-icon selectors in table styles Each td action-icon modifier is now its own sibling selector instead of being nested under one shared block. This commit was AI generated --- src/styles/components/_tables.scss | 115 ++++++++++++++--------------- 1 file changed, 57 insertions(+), 58 deletions(-) diff --git a/src/styles/components/_tables.scss b/src/styles/components/_tables.scss index b4e43ab170..51e2e6c6f0 100644 --- a/src/styles/components/_tables.scss +++ b/src/styles/components/_tables.scss @@ -275,6 +275,7 @@ vertical-align: middle; // Action icons + // Each modifier below is a sibling selector > a, > button { display: inline-block; margin-right: 10px; @@ -284,79 +285,77 @@ color: variables.$ref-blue; padding: unset; line-height: normal; + } - &.action-cell-button { - width: 17px; - height: 17px; - - > svg { - width: 100%; - height: 100%; - } - - .blue { - color: variables.$ref-blue; - } + > a.action-cell-button, > button.action-cell-button { + width: 17px; + height: 17px; - .darkgrey { - color: variables.$color-darkgray; - } + > svg { + width: 100%; + height: 100%; } - &.remove { - color: variables.$red; + .blue { + color: variables.$ref-blue; } - &.more-series { - color: variables.$green; + .darkgrey { + color: variables.$color-darkgray; } + } - &.cut { - .badge { - position: relative; - margin-right: -9px; - left: -7px; - bottom: 10px; - width: 6px; - height: 6px; - display: inline-block; - border-radius:100%; - background-color: variables.$red; - } - } + > a.remove, > button.remove { + color: variables.$red; + } - &.edit { - color: variables.$l-blue; - } + > a.more-series, > button.more-series { + color: variables.$green; + } - &.fa { - font-size: 18px; - color: variables.$color-darkgray; - } + > a.cut .badge, > button.cut .badge { + position: relative; + margin-right: -9px; + left: -7px; + bottom: 10px; + width: 6px; + height: 6px; + display: inline-block; + border-radius:100%; + background-color: variables.$red; + } - &.crosslink { - border-bottom: 1px solid transparent; - text-align: left; + > a.edit, > button.edit { + color: variables.$l-blue; + } - &:hover { - border-bottom: 1px solid; - } - } - - .notification { - position: absolute; - top: -3px; - right: -3px; - width: 7px; - height: 7px; - border-radius: 50%; - border: 2px solid variables.$white; - background: variables.$red; - width: 10px; - height: 10px; + > a.fa, > button.fa { + font-size: 18px; + color: variables.$color-darkgray; + } + + > a.crosslink, > button.crosslink { + border-bottom: 1px solid transparent; + text-align: left; + + &:hover { + border-bottom: 1px solid; } } + > a .notification, > button .notification { + position: absolute; + top: -3px; + right: -3px; + width: 7px; + height: 7px; + border-radius: 50%; + border: 2px solid variables.$white; + background: variables.$red; + width: 10px; + height: 10px; + } + .notes-container { overflow-y: auto; From 4c5a2ee6ef1c9ed622c8ea3118d2e3825fe0cfa8 Mon Sep 17 00:00:00 2001 From: Arnei Date: Fri, 4 Sep 2026 14:36:03 +0200 Subject: [PATCH 3/9] Decouple media stream table CSS from ancestor DOM structure The stream table wrapper now has its own unique class instead of relying on a 6-level ancestor selector chain. This commit was AI generated --- .../EventDetailsAssetMediaDetails.tsx | 6 +-- src/styles/components/modals/_modal-base.scss | 40 +++++++++---------- 2 files changed, 23 insertions(+), 23 deletions(-) diff --git a/src/components/events/partials/ModalTabsAndPages/EventDetailsAssetMediaDetails.tsx b/src/components/events/partials/ModalTabsAndPages/EventDetailsAssetMediaDetails.tsx index 9c8db06fda..1859abb50b 100644 --- a/src/components/events/partials/ModalTabsAndPages/EventDetailsAssetMediaDetails.tsx +++ b/src/components/events/partials/ModalTabsAndPages/EventDetailsAssetMediaDetails.tsx @@ -142,9 +142,9 @@ const EventDetailsAssetMediaDetails = () => { {t("EVENTS.EVENTS.DETAILS.ASSETS.STREAMS") /* Streams */}
-
+
{/* table with details for the audio streams */} -
+
{ t( @@ -248,7 +248,7 @@ const EventDetailsAssetMediaDetails = () => {
{/* table with details for the video streams */} -
+
{ t( diff --git a/src/styles/components/modals/_modal-base.scss b/src/styles/components/modals/_modal-base.scss index 80a1945802..56172ce313 100644 --- a/src/styles/components/modals/_modal-base.scss +++ b/src/styles/components/modals/_modal-base.scss @@ -260,31 +260,31 @@ .tbl-container { width: variables.$modal-full-col-width; + } + } +} - .obj-container .table-series .wrapper { - - padding: 1% 2%; +// Audio/video stream tables on the event asset media details tab +.media-stream-table-wrapper { + padding: 1% 2%; - &:first-child { - padding-top: 2%; - } + &:first-child { + padding-top: 2%; + } - &:last-child { - padding-bottom: 2%; - } + &:last-child { + padding-bottom: 2%; + } - header { - border: variables.$thin-border-stroke variables.$main-border-color; - } + header { + border: variables.$thin-border-stroke variables.$main-border-color; + } - .main-tbl { - border: variables.$thin-border-stroke variables.$main-border-color; - border-top: none; - border-top-left-radius: 0; - border-top-right-radius: 0; - } - } - } + .main-tbl { + border: variables.$thin-border-stroke variables.$main-border-color; + border-top: none; + border-top-left-radius: 0; + border-top-right-radius: 0; } } From fe9046bc9d423a9a17df1f23a7d96fe09307ec57 Mon Sep 17 00:00:00 2001 From: Arnei Date: Fri, 4 Sep 2026 15:09:37 +0200 Subject: [PATCH 4/9] Replace float/position hack in statistics header with flexbox The old float/absolute/negative-margin combo didn't reliably keep the mode row below it from overlapping; a flex row does. This commit was AI generated --- .../shared/TimeSeriesStatistics.tsx | 28 ++++++++++--------- src/styles/components/_statistics-graph.scss | 10 ++++--- 2 files changed, 21 insertions(+), 17 deletions(-) diff --git a/src/components/shared/TimeSeriesStatistics.tsx b/src/components/shared/TimeSeriesStatistics.tsx index c98ba55d75..19fac04b26 100644 --- a/src/components/shared/TimeSeriesStatistics.tsx +++ b/src/components/shared/TimeSeriesStatistics.tsx @@ -191,20 +191,22 @@ const TimeSeriesStatistics = ({ > {formik => (
- {/* download link for a statistic file */} -
- - - -
+
+ {/* statistics total value */} +
+ {t("STATISTICS.TOTAL") /* Total */} + {": " + totalValue} +
- {/* statistics total value */} -
- {t("STATISTICS.TOTAL") /* Total */} - {": " + totalValue} + {/* download link for a statistic file */} +
+ + + +
{/* radio buttons for selecting the mode of choosing the timeframe of statistic */} diff --git a/src/styles/components/_statistics-graph.scss b/src/styles/components/_statistics-graph.scss index 3b9b070dc2..d4248d82af 100644 --- a/src/styles/components/_statistics-graph.scss +++ b/src/styles/components/_statistics-graph.scss @@ -82,19 +82,21 @@ } } + .stats-header { + display: flex; + justify-content: space-between; + align-items: flex-start; + } + .total { - float: left; - position: absolute; padding-top: 17px; padding-left: 20px; font-size: 12px; } .download { - float: right; padding-top: 14px; padding-right: 14px; - margin-left: -100%; .download-icon { font-size: 30px; From 8b37e441baa0ae7cf3656f4fd9d2d85d33fe298c Mon Sep 17 00:00:00 2001 From: Arnei Date: Mon, 7 Sep 2026 09:31:44 +0200 Subject: [PATCH 5/9] Fix uncontained float height in filter-profile buttons The floated cancel/save buttons weren't contained by their parent, collapsing it to zero height; flexbox fixes that. This commit was AI generated --- src/styles/components/_table-filter-profiles.scss | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) diff --git a/src/styles/components/_table-filter-profiles.scss b/src/styles/components/_table-filter-profiles.scss index 9992172147..566b3fd602 100644 --- a/src/styles/components/_table-filter-profiles.scss +++ b/src/styles/components/_table-filter-profiles.scss @@ -183,7 +183,8 @@ .btn-container { width: 100%; - float: right; + display: flex; + justify-content: flex-end; padding: 5px; border-bottom-left-radius: variables.$main-border-radius; border-bottom-right-radius: variables.$main-border-radius; @@ -191,17 +192,17 @@ border-top: 1px solid variables.$main-border-color; } + // When both buttons are present, push cancel to the opposite end + // from save instead of leaving a fixed gap between them. .cancel { @include button.btn(white); - margin-right: 3px; - float: left; + margin-right: auto; height: 28px; } // cancel .save { @include button.btn(green); text-shadow: none; - float: right; height: 28px; } // save } // input-container From 9af5b9ee6c714ca6f4ea6301ee55dc88a110e9e5 Mon Sep 17 00:00:00 2001 From: Arnei Date: Mon, 7 Sep 2026 10:36:53 +0200 Subject: [PATCH 6/9] Remove dead float-based layout rules from _form.scss .inline-content, .small-column/.medium-column, .checkbox-container.one-line, and .button-container.float-opposite were never referenced by any component; removed instead of converting them. This commit was AI generated --- src/styles/components/_form.scss | 73 -------------------------------- 1 file changed, 73 deletions(-) diff --git a/src/styles/components/_form.scss b/src/styles/components/_form.scss index e3760ab08f..6ba56b639a 100644 --- a/src/styles/components/_form.scss +++ b/src/styles/components/_form.scss @@ -79,53 +79,6 @@ float: none; } - input, - textarea, - .drop-down-container, - - - // Checkbox Content - // ---------------------------------------- - - // ## Todo: Update markup and require a block level container - // to split checkboxes and labels into groups and rows - - .checkbox-container.one-line { // refactor out .one-line after markup change - - input[type="checkbox"], - label { - display: inline-block; - width: auto; - } - - input[type='checkbox'] { - margin-right: 5px; - } - - } - - - // Inline Content - // ---------------------------------------- - - .inline-content { - - > label { - float: left; - margin-top: 14px; - margin-right: 8px; - margin-left: 8px; - } - - > input { - float: left; - } - - &.inline-content-padded { - padding: 18px 0 0; - } - } - input[type="radio"] { float: left; margin: 1px 5px 0 0; @@ -137,23 +90,6 @@ &.no-padding { margin-top: 0; } - - [class$="-column"] { - display: inline-block; - } - - .small-column { - width: 25%; - padding-right: 10px; - } - - .medium-column { - width: 40%; - - > .inline-content > label { - width: 50%; - } - } } .button-container { @@ -162,15 +98,6 @@ a { padding: 10px 20px; } - - &.float-opposite { - a:first-child { - float: left; - } - a:last-child { - float: right; - } - } } &.tiny-form { From 16f59427dc52876e954b53a043be0c1b54fb6c96 Mon Sep 17 00:00:00 2001 From: Arnei Date: Mon, 7 Sep 2026 11:57:22 +0200 Subject: [PATCH 7/9] Remove more dead CSS: form/button variants and unused table columns .tiny-form/.smaller-form/.small-form/.medium-form/.large-form, .add-btn/.circle-btn, .red-btn (its rule stays via .danger-btn), and the .action/.single/.double/.triple/.status-col table-column-width modifiers are never applied by any component - verified via full-codebase search, git history, and checking every "+ Add" button's shared code path. This commit was AI generated --- src/styles/components/_form.scss | 20 -------------------- src/styles/components/_tables.scss | 23 ----------------------- src/styles/mixins/_button.scss | 21 --------------------- 3 files changed, 64 deletions(-) diff --git a/src/styles/components/_form.scss b/src/styles/components/_form.scss index 6ba56b639a..4724d1b11c 100644 --- a/src/styles/components/_form.scss +++ b/src/styles/components/_form.scss @@ -100,26 +100,6 @@ } } - &.tiny-form { - max-width: 150px; - } - - &.smaller-form { - max-width: 280px; - } - - &.small-form { - max-width: 500px; - } - - &.medium-form { - max-width: 800px; - } - - &.large-form { - max-width: 1000px; - } - &.compact { margin: 0; } diff --git a/src/styles/components/_tables.scss b/src/styles/components/_tables.scss index 51e2e6c6f0..02426bf317 100644 --- a/src/styles/components/_tables.scss +++ b/src/styles/components/_tables.scss @@ -131,25 +131,6 @@ box-shadow: inset 0 3px 10px 2px variables.$color-table-cell-shadow; } - // Special column - &.action { - width: 202px; - text-align: center; - padding-left: 0; - - &.single { - width: 70px !important; - } - - &.double { - width: 80px !important; - } - - &.triple { - width: 110px !important; - } - } - &.small { width: 30px; } @@ -166,10 +147,6 @@ width: 100%; } - &.status-col { - width: 43px; - } - span { display: flex; flex-direction: row; diff --git a/src/styles/mixins/_button.scss b/src/styles/mixins/_button.scss index 8b00ca42d4..36a3c15570 100644 --- a/src/styles/mixins/_button.scss +++ b/src/styles/mixins/_button.scss @@ -181,26 +181,6 @@ button { } // Buttons -.add-btn { - @include btn(green); - display: inline; - - // Circle button - &.circle-btn { - border-radius: 50%; - display: inline-block; - padding: 0; - width: 24px; - height: 24px; - - > i { - position: absolute; - top: 7px; - left: 7px; - } - } -} - .cancel-btn { @include btn(white); } @@ -209,7 +189,6 @@ button { @include btn(lightblue); } -.red-btn, .danger-btn { @include btn(red); } From 2ffb3e9fd680b853abe788dc9d7d10fce13af503 Mon Sep 17 00:00:00 2001 From: Arnei Date: Mon, 7 Sep 2026 12:48:06 +0200 Subject: [PATCH 8/9] Remove remaining unused CSS selectors found in the dead-code sweep darker-row, event-container, external-link, has-alert, multi-select-search (base rule and the leftover #group-modal reference), no-padding, section-heading, single-btn, text-left/text-right, top-tbl, vertical-resize, wider, and being-dragged (its unused drag-snapshot prop confirmed via _snapshot) are all unreferenced. Also renamed offset-col-2 to offset-col since offset-col-1 (its only sibling) is gone. This commit was AI generated --- src/components/shared/wizard/SelectContainer.tsx | 2 +- src/styles/base/_layout.scss | 8 -------- src/styles/components/_form.scss | 6 ------ src/styles/components/_multi-select.scss | 16 +++------------- src/styles/components/_tables.scss | 9 --------- src/styles/components/modals/_modal-base.scss | 15 --------------- src/styles/components/modals/_nav.scss | 7 +------ src/styles/main.scss | 4 ---- src/styles/views/_core.scss | 4 ---- src/styles/views/modals/_edit-table-view.scss | 3 +-- src/styles/views/modals/_group.scss | 2 +- 11 files changed, 7 insertions(+), 69 deletions(-) diff --git a/src/components/shared/wizard/SelectContainer.tsx b/src/components/shared/wizard/SelectContainer.tsx index e81a18d0c3..7f8adf8f38 100644 --- a/src/components/shared/wizard/SelectContainer.tsx +++ b/src/components/shared/wizard/SelectContainer.tsx @@ -191,7 +191,7 @@ const SelectContainer = ({ return (
-
+