From ffadf2497a4450560878b120f0842629738bff8e Mon Sep 17 00:00:00 2001
From: Josiah Hoskins <Josiah.Hoskins@ibm.com>
Date: Tue, 2 Apr 2024 13:21:20 -0500
Subject: [PATCH 1/3] Numbers reflow

---
 .../src/ts/devtools/components/scanSection.scss      | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/accessibility-checker-extension/src/ts/devtools/components/scanSection.scss b/accessibility-checker-extension/src/ts/devtools/components/scanSection.scss
index b02d4240b..e3a208667 100644
--- a/accessibility-checker-extension/src/ts/devtools/components/scanSection.scss
+++ b/accessibility-checker-extension/src/ts/devtools/components/scanSection.scss
@@ -119,9 +119,9 @@
 
     .countCol {
         @media (max-width:400px) {
-            position: absolute;
-            top: 1.5rem;
-            left: 0rem;
+            // position: absolute;
+            // top: 1.5rem;
+            // left: 0rem;
         }
         white-space: nowrap;
     }
@@ -148,9 +148,9 @@
     }
     .countCol {
         @media (max-width:400px) {
-            position: absolute;
-            top: 1.5rem;
-            left: 0rem;
+            // position: absolute;
+            // top: 1.5rem;
+            // left: 0rem;
         }
         white-space: nowrap;
     }

From d5fcf7d31497eef53f9400899944131198a5baa9 Mon Sep 17 00:00:00 2001
From: Josiah Hoskins <Josiah.Hoskins@ibm.com>
Date: Tue, 2 Apr 2024 14:12:36 -0500
Subject: [PATCH 2/3] lot's of itty bitty reflow...

---
 .../ts/devtools/components/reportSection.scss |   7 +-
 .../ts/devtools/components/reportSection.tsx  | 147 +++++++++---------
 .../ts/devtools/components/scanSection.scss   |   4 +-
 .../ts/devtools/components/scanSection.tsx    |  87 ++++++-----
 4 files changed, 121 insertions(+), 124 deletions(-)

diff --git a/accessibility-checker-extension/src/ts/devtools/components/reportSection.scss b/accessibility-checker-extension/src/ts/devtools/components/reportSection.scss
index 3f7c010e4..bd87fa318 100644
--- a/accessibility-checker-extension/src/ts/devtools/components/reportSection.scss
+++ b/accessibility-checker-extension/src/ts/devtools/components/reportSection.scss
@@ -32,14 +32,14 @@
 
     .totalCountDisable {
         @include type-style("label-02");
-        margin-top: 10px;
+        margin-top: 3px;
         pointer-events: none;
         color: $text-disabled;
         text-align: right;
     }
     .totalCountEnable {
         @include type-style("label-02");
-        margin-top: 10px;
+        margin-top: 3px;
         pointer-events: auto;
         text-align: right;
     }
@@ -63,10 +63,11 @@
 }
 
 .viewMulti {
+    float:right;
     width: 230px;
     .cds--list-box {
         max-height: 2rem;
-        border-left: solid $gray-40 1px
+        border: solid $gray-40 1px;
     }   
 }
 
diff --git a/accessibility-checker-extension/src/ts/devtools/components/reportSection.tsx b/accessibility-checker-extension/src/ts/devtools/components/reportSection.tsx
index c212effa2..d2e88a4c7 100644
--- a/accessibility-checker-extension/src/ts/devtools/components/reportSection.tsx
+++ b/accessibility-checker-extension/src/ts/devtools/components/reportSection.tsx
@@ -222,89 +222,84 @@ export class ReportSection extends React.Component<ReportSectionProps, ReportSec
         let viewFilterSection = <>
              <div className="reportFilterBorder" />
              {this.state.filterShown && <Grid className="reportViewFilterSection">
-                <Column sm={4} md={8} lg={8} style={{ marginRight: "0px" }}>
-                    <div style={{display: "flex", flexWrap: "wrap", gap: "1rem", float: "right"}}>
-                            <div style={{flex: "0 1 8.75rem"}}>
-                                <div style={{display: "flex"}}>
-                                    <div style={{flex: "1 1 8.75rem", maxWidth: "8.75rem", marginRight: "8px" }}>
-                                        {!this.state.viewState || !this.state.viewState!.kcm &&
-                                            <Dropdown
-                                                className="viewMulti"
-                                                ariaLabel="Select report view"
-                                                disabled={totalCount === 0}
-                                                id="reportView"
-                                                size="sm" 
-                                                items={viewItems}
-                                                light={false}
-                                                type="default"
-                                                style={{width:"160px"}}
-                                                selectedItem={this.state.reportViewState}
-                                                onChange={async (evt: any) => {
-                                                    // set state
-                                                    this.setState({ reportViewState: evt.selectedItem });
-                                                }}
-                                            />
+                <Column sm={4} md={8} lg={8}>
+                    <div style={{display: "flex", flexWrap: "wrap", float: "right", gap: "1px 0px"}}>
+                        <div style={{flex: "1 1 auto", margin: "-1px 0px" }}></div>
+                        <div style={{flex: "1 1 0", marginRight: "0px", margin: "-1px 0px" }}>
+                            {!this.state.viewState || !this.state.viewState!.kcm &&
+                                <Dropdown
+                                    className="viewMulti"
+                                    ariaLabel="Select report view"
+                                    disabled={totalCount === 0}
+                                    id="reportView"
+                                    size="sm" 
+                                    items={viewItems}
+                                    light={false}
+                                    type="default"
+                                    style={{width:"160px", float: "right"}}
+                                    selectedItem={this.state.reportViewState}
+                                    onChange={async (evt: any) => {
+                                        // set state
+                                        this.setState({ reportViewState: evt.selectedItem });
+                                    }}
+                                />
+                            }
+                        </div>
+                        <div style={{flex: "1 1 0", margin: "-1px 0px"}}>
+                            {
+                                <MultiSelect
+                                    className="viewMulti"
+                                    ariaLabel="Issue type filter"
+                                    label="Filter"
+                                    size="sm" 
+                                    hideLabel={true}
+                                    disabled={totalCount === 0}
+                                    id="filterSelection"
+                                    items={filterItems}
+                                    itemToString={(item:any) => (item ? item.text : '')}
+                                    itemToElement={(item:any) => {
+                                            if (item && item.id === "0") {
+                                                return <span>{UtilIssueReact.valueSingToIcon("Violation", "reportSecIcon")} {item.text}</span>
+                                            } else if (item && item.id === "1") {
+                                                return <span>{UtilIssueReact.valueSingToIcon("Needs review", "reportSecIcon")} {item.text}</span>
+                                            } else if (item && item.id === "2") {
+                                                return <span>{UtilIssueReact.valueSingToIcon("Recommendation", "reportSecIcon")} {item.text}</span>   
+                                            } else if (item && item.id === "3") {
+                                                return <span>{UtilIssueReact.valueSingToIcon("ViewOff", "reportSecIcon")} {item.text}</span>
+                                            }
+                                            return <></>
                                         }
-                                    </div>
-                                    <div style={{flex: "1 1 8.75rem"}}>
-                                        {
-                                            <MultiSelect
-                                                className="viewMulti"
-                                                ariaLabel="Issue type filter"
-                                                label="Filter"
-                                                size="sm" 
-                                                hideLabel={true}
-                                                disabled={totalCount === 0}
-                                                id="filterSelection"
-                                                items={filterItems}
-                                                itemToString={(item:any) => (item ? item.text : '')}
-                                                itemToElement={(item:any) => {
-                                                        if (item && item.id === "0") {
-                                                            return <span>{UtilIssueReact.valueSingToIcon("Violation", "reportSecIcon")} {item.text}</span>
-                                                        } else if (item && item.id === "1") {
-                                                            return <span>{UtilIssueReact.valueSingToIcon("Needs review", "reportSecIcon")} {item.text}</span>
-                                                        } else if (item && item.id === "2") {
-                                                            return <span>{UtilIssueReact.valueSingToIcon("Recommendation", "reportSecIcon")} {item.text}</span>   
-                                                        } else if (item && item.id === "3") {
-                                                            return <span>{UtilIssueReact.valueSingToIcon("ViewOff", "reportSecIcon")} {item.text}</span>
-                                                        }
-                                                        return <></>
-                                                    }
-                                                }
-                                                light={false}
-                                                type="default"
-                                                style={{ float: "right" }}
-                                                selectedItems={levelSelectedItems}
-                                                initialSelectedItems={levelSelectedItems}
-                                                onChange={async (evt: any) => {
-                                                    let checked = appController.getLevelFilters();
-                                                    if (evt.selectedItems != undefined) {
-                                                        checked["Violation"] = evt.selectedItems.some((item: any) => item.text === "Violations");
-                                                        checked["Needs review"] = evt.selectedItems.some((item: any) => item.text === "Needs review");
-                                                        checked["Recommendation"] = evt.selectedItems.some((item: any) => item.text === "Recommendations");
-                                                        checked["Hidden"] = evt.selectedItems.some((item: any) => item.text === "Hidden");
-                                                    }
-                                                    appController.setLevelFilters(checked);
-                                                }}
-                                            />
+                                    }
+                                    light={false}
+                                    type="default"
+                                    selectedItems={levelSelectedItems}
+                                    initialSelectedItems={levelSelectedItems}
+                                    onChange={async (evt: any) => {
+                                        let checked = appController.getLevelFilters();
+                                        if (evt.selectedItems != undefined) {
+                                            checked["Violation"] = evt.selectedItems.some((item: any) => item.text === "Violations");
+                                            checked["Needs review"] = evt.selectedItems.some((item: any) => item.text === "Needs review");
+                                            checked["Recommendation"] = evt.selectedItems.some((item: any) => item.text === "Recommendations");
+                                            checked["Hidden"] = evt.selectedItems.some((item: any) => item.text === "Hidden");
                                         }
-                                    </div>
-                                    <div style={{flex: "1 1 8.75rem"}}>
-                                        <div>
-                                            <Button
-                                                kind="tertiary"
-                                                disabled={totalCount === 0}
-                                                style={{ float: "right", marginRight: "16px", minHeight: "18px", maxHeight: "32px" }}
-                                                onClick={() => devtoolsController.exportXLS("last") }
-                                            >Export XLS</Button>
-                                        </div>
-                                    </div>
+                                        appController.setLevelFilters(checked);
+                                    }}
+                                />
+                            }
+                        </div>
+                        <div style={{flex: "1 1 0", margin: "-1px 0px"}}>
+                            <div>
+                                <Button
+                                    kind="tertiary"
+                                    disabled={totalCount === 0}
+                                    style={{ float: "right", minHeight: "18px", maxHeight: "32px", minWidth: "10rem" }}
+                                    onClick={() => devtoolsController.exportXLS("last") }
+                                >Export XLS</Button>
                             </div>
                         </div>
                     </div>
                 </Column>
              </Grid>}
-             <div className="reportFilterBorder" />
         </>        
 
         return (<>
diff --git a/accessibility-checker-extension/src/ts/devtools/components/scanSection.scss b/accessibility-checker-extension/src/ts/devtools/components/scanSection.scss
index e3a208667..1f56d2404 100644
--- a/accessibility-checker-extension/src/ts/devtools/components/scanSection.scss
+++ b/accessibility-checker-extension/src/ts/devtools/components/scanSection.scss
@@ -86,7 +86,7 @@
     }
     .totalCountDisable {
         @include type-style("label-02");
-        margin-top: 10px;
+        margin-top: 3px;
         pointer-events: none;
         
         text-align: right;
@@ -100,7 +100,7 @@
     }
     .totalCountEnable {
         @include type-style("label-02");
-        margin-top: 10px;
+        margin-top: 3px;
         pointer-events: auto;
         text-align: right;
         .darkLink {
diff --git a/accessibility-checker-extension/src/ts/devtools/components/scanSection.tsx b/accessibility-checker-extension/src/ts/devtools/components/scanSection.tsx
index 2b45d99f0..7fa9ad290 100644
--- a/accessibility-checker-extension/src/ts/devtools/components/scanSection.tsx
+++ b/accessibility-checker-extension/src/ts/devtools/components/scanSection.tsx
@@ -448,58 +448,59 @@ export class ScanSection extends React.Component<{}, ScanSectionState> {
             </Grid>
             <Grid>
                 <Column sm={4} md={8} lg={8}>
-                    <div className="storedCount">
-                        {this.state.storeReports && "Storing: "}
-                        {this.state.storeReports && this.state.storedReportsCount === 0 && "No scans stored"}
-                        {this.state.storedReportsCount > 0 && `${this.state.storedReportsCount} scans stored`}
-                    </div>
-               
-                    <div className={totalCount === 0 ? "totalCountDisable" : "totalCountEnable"} >
-                    {["Violation", "Needs review", "Recommendation"].map((levelStr) => {
-                        totalCount += filterCounts[levelStr as eLevel].total;
-                        return <>
+                    <div style={{display: "flex", flexWrap: "wrap", gap: "0rem 1rem"}}>
+                        <div className="storedCount" style={{ flex: "1 1 0", whiteSpace: "nowrap" }}>
+                            {this.state.storeReports && "Storing: "}
+                            {this.state.storeReports && this.state.storedReportsCount === 0 && "No scans stored"}
+                            {this.state.storedReportsCount > 0 && `${this.state.storedReportsCount} scans stored`}
+                        </div>
+                
+                        <div style={{ flex: "1 1 1" }} className={totalCount === 0 ? "totalCountDisable" : "totalCountEnable"} >
+                            {["Violation", "Needs review", "Recommendation"].map((levelStr) => {
+                                totalCount += filterCounts[levelStr as eLevel].total;
+                                return <>
+                                    <span className='scanFilterSection' data-tip style={{ marginRight: "1rem", display: "inline-block", verticalAlign: "middle", paddingTop: "4px" }}>
+                                        <span className="countCol">
+                                            <DefinitionTooltip openOnHover align="top-left" definition={levelStr}>
+                                            {UtilIssueReact.valueSingToIcon(levelStr, "reportSecIcon")}</DefinitionTooltip>
+                                            <span className="reportSecCounts" style={{ marginLeft: "4px" }}>
+                                                {reportIssues && <>
+                                                    {(filterCounts[levelStr as eLevel].focused === filterCounts[levelStr as eLevel].total) ?
+                                                        filterCounts[levelStr as eLevel].total
+                                                    : <>
+                                                        {filterCounts[levelStr as eLevel].focused}/{filterCounts[levelStr as eLevel].total}
+                                                    </>}
+                                                </>}
+                                            </span>
+                                        </span>
+                                        {/* </Tooltip> */}
+                                    </span>
+                                </>
+                            })}
                             <span className='scanFilterSection' data-tip style={{ display: "inline-block", verticalAlign: "middle", paddingTop: "4px" }}>
                                 <span className="countCol">
-                                    <DefinitionTooltip openOnHover align="top-left" definition={levelStr}>
-                                    {UtilIssueReact.valueSingToIcon(levelStr, "reportSecIcon")}</DefinitionTooltip>
+                                <DefinitionTooltip openOnHover align="top-left" definition="Hidden">
+                                {UtilIssueReact.valueSingToIcon(BrowserDetection.isDarkMode()?"ViewOn":"ViewOff", "reportSecIcon")}</DefinitionTooltip>
                                     <span className="reportSecCounts" style={{ marginLeft: "4px" }}>
                                         {reportIssues && <>
-                                            {(filterCounts[levelStr as eLevel].focused === filterCounts[levelStr as eLevel].total) ?
-                                                filterCounts[levelStr as eLevel].total
-                                            : <>
-                                                {filterCounts[levelStr as eLevel].focused}/{filterCounts[levelStr as eLevel].total}
-                                            </>}
+                                            {this.state.ignoredIssues.length}
                                         </>}
                                     </span>
                                     <span style={{ marginRight: "18px" }}></span>
                                 </span>
-                                {/* </Tooltip> */}
                             </span>
-                        </>
-                    })}
-                    <span className='scanFilterSection' data-tip style={{ display: "inline-block", verticalAlign: "middle", paddingTop: "4px" }}>
-                        <span className="countCol">
-                        <DefinitionTooltip openOnHover align="top-left" definition="Hidden">
-                        {UtilIssueReact.valueSingToIcon(BrowserDetection.isDarkMode()?"ViewOn":"ViewOff", "reportSecIcon")}</DefinitionTooltip>
-                            <span className="reportSecCounts" style={{ marginLeft: "4px" }}>
-                                {reportIssues && <>
-                                    {this.state.ignoredIssues.length}
-                                </>}
-                            </span>
-                            <span style={{ marginRight: "18px" }}></span>
-                        </span>
-                    </span>
-                    <Link 
-                        id="totalIssuesCount" 
-                        href="#0"
-                        className= {totalCount === 0 ? "darkLink totalCountDisable" : "darkLink totalCountEnable"}
-                        aria-disabled={totalCount === 0}
-                        inline={true}
-                        onClick={() => {
-                            let appController = getDevtoolsAppController();
-                            getDevtoolsAppController().setSecondaryView("summary");
-                            appController.openSecondary("totalIssuesCount");
-                    }}>{quickTotalCount} issues found</Link>
+                            <Link 
+                                id="totalIssuesCount" 
+                                href="#0"
+                                className= {totalCount === 0 ? "darkLink totalCountDisable" : "darkLink totalCountEnable"}
+                                aria-disabled={totalCount === 0}
+                                inline={true}
+                                onClick={() => {
+                                    let appController = getDevtoolsAppController();
+                                    getDevtoolsAppController().setSecondaryView("summary");
+                                    appController.openSecondary("totalIssuesCount");
+                            }}><span style={{whiteSpace: "nowrap"}}>{quickTotalCount} issues found</span></Link>
+                        </div>
                     </div>
                 </Column>
             </Grid>

From 4a0283edd8058f80bfd13c9bfc4daee6ca30aee4 Mon Sep 17 00:00:00 2001
From: Josiah Hoskins <Josiah.Hoskins@ibm.com>
Date: Mon, 15 Apr 2024 11:27:12 -0500
Subject: [PATCH 3/3] Fix conflict

---
 .../src/ts/devtools/components/scanSection.tsx                | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/accessibility-checker-extension/src/ts/devtools/components/scanSection.tsx b/accessibility-checker-extension/src/ts/devtools/components/scanSection.tsx
index 8e33ec12b..95c87cd2f 100644
--- a/accessibility-checker-extension/src/ts/devtools/components/scanSection.tsx
+++ b/accessibility-checker-extension/src/ts/devtools/components/scanSection.tsx
@@ -457,7 +457,7 @@ export class ScanSection extends React.Component<{}, ScanSectionState> {
                 
                         <div style={{ flex: "1 1 1" }} className={totalCount === 0 ? "totalCountDisable" : "totalCountEnable"} >
                             {["Violation", "Needs review", "Recommendation"].map((levelStr) => {
-                                totalCount += filterCounts[levelStr as eLevel].total;
+                                // totalCount += filterCounts[levelStr as eLevel].total;
                                 return <>
                                     <span className='scanFilterSection' data-tip style={{ marginRight: "1rem", display: "inline-block", verticalAlign: "middle", paddingTop: "4px" }}>
                                         <span className="countCol">
@@ -499,7 +499,7 @@ export class ScanSection extends React.Component<{}, ScanSectionState> {
                                     let appController = getDevtoolsAppController();
                                     getDevtoolsAppController().setSecondaryView("summary");
                                     appController.openSecondary("totalIssuesCount");
-                            }}><span style={{whiteSpace: "nowrap"}}>{quickTotalCount} issues found</span></Link>
+                            }}><span style={{whiteSpace: "nowrap"}}>{totalCount} issues found</span></Link>
                         </div>
                     </div>
                 </Column>