diff --git a/src/common/components/cards/simple-card-row.tsx b/src/common/components/cards/simple-card-row.tsx index 90dd89d25ff..a2b5a09aca7 100644 --- a/src/common/components/cards/simple-card-row.tsx +++ b/src/common/components/cards/simple-card-row.tsx @@ -16,13 +16,11 @@ export interface SimpleCardRowProps { export const SimpleCardRow = NamedFC( 'SimpleCardRow', ({ label: givenLabel, content, rowKey, contentClassName }) => { - const contentStyling = css(styles.instanceListRowContent, contentClassName); + const contentStyling = css(styles.rowContent, contentClassName); return ( - - {givenLabel} - + {givenLabel} {content} ); diff --git a/src/common/components/cards/snippet-card-row.scss b/src/common/components/cards/snippet-card-row.scss new file mode 100644 index 00000000000..eb7d231b3cc --- /dev/null +++ b/src/common/components/cards/snippet-card-row.scss @@ -0,0 +1,8 @@ +// Copyright (c) Microsoft Corporation. All rights reserved. +// Licensed under the MIT License. +@import '../../../common/styles/fonts.scss'; + +.snippet { + font-family: $codeFontFamily; + white-space: normal; +} diff --git a/src/common/components/cards/snippet-card-row.tsx b/src/common/components/cards/snippet-card-row.tsx index 0b9ada410a4..2f71289f08b 100644 --- a/src/common/components/cards/snippet-card-row.tsx +++ b/src/common/components/cards/snippet-card-row.tsx @@ -2,6 +2,6 @@ // Licensed under the MIT License. import { GetLabelledStringPropertyCardRow } from './get-labelled-string-property-card-row'; -import { contentSnipppet } from '../../../reports/components/instance-details.scss'; +import * as styles from './snippet-card-row.scss'; -export const SnippetCardRow = GetLabelledStringPropertyCardRow('Snippet', contentSnipppet); +export const SnippetCardRow = GetLabelledStringPropertyCardRow('Snippet', styles.snippet); diff --git a/src/electron/views/automated-checks/automated-checks-view.scss b/src/electron/views/automated-checks/automated-checks-view.scss index b7e23155984..1412072a7bd 100644 --- a/src/electron/views/automated-checks/automated-checks-view.scss +++ b/src/electron/views/automated-checks/automated-checks-view.scss @@ -38,8 +38,4 @@ min-width: 220px; } } - - :global(.report-instance-table-label-overrides) { - width: 127px; - } } diff --git a/src/reports/components/instance-details.scss b/src/reports/components/instance-details.scss index 41f996d0788..1e3db24e572 100644 --- a/src/reports/components/instance-details.scss +++ b/src/reports/components/instance-details.scss @@ -51,80 +51,60 @@ @include fill-available-width; border-radius: inherit; - - th { - padding: 12px 20px; - - vertical-align: top; - } - - .row { - top: calc(50% - 20px / 2); - border-bottom: 0.5px solid $neutral-10; - } - - .row:last-child { - border-bottom: none; - } -} - -.report-instance-table .label { - font-size: 14px; - line-height: 20px; - font-family: $semiBoldFontFamily; - color: $primary-text; - text-align: left; - width: 70px; -} - -.report-instance-table .instance-list-row-content { - color: $secondary-text; - padding: 12px 20px; - font-size: 14px; - line-height: 20px; - align-items: flex-end; - display: flex; -} - -.report-instance-table .instance-list-row-content.content-snipppet { - font-family: Consolas, Segoe UI, Courier New, monospace; - white-space: normal; - word-wrap: break-word; - word-break: break-word; -} - -table.report-instance-table { border-collapse: collapse; - overflow-x: auto; - word-break: break-word; -} -@media screen and (max-width: 480px) { - .report-instance-table tr { - display: block; - } - - .report-instance-table td { - display: block; + overflow-wrap: break-word; + word-break: break-word; - .label { - text-align: left; + .row { + display: flex; + flex-wrap: wrap; + + // The padding on the parent and margins on the children are coupled; they + // are intended to produce the desired spacing regardless of whether the children + // are presented side-by-side or wrapped + padding-top: 2px; + padding-bottom: 14px; + padding-left: 0px; + padding-right: 20px; + > * { + margin-top: 12px; + margin-bottom: 0px; + margin-left: 20px; + margin-right: 0px; + padding: 0; } - .instance-list-row-content { - text-align: right; + border-bottom: 0.5px solid $neutral-10; + &:last-child { + border-bottom: none; } } - .report-instance-table td::before { - float: left; + .row-label { + // This functions as the width of the label; it is sized to match the widest + // text we know the label to render in actual usage (currently "How to check"), + // plus 4px of fudge-factor to account for differences in fonts across browsers/OS + flex-basis: 90px; + flex-shrink: 1; + flex-grow: 0; + + font-size: 14px; + line-height: 20px; + font-family: $semiBoldFontFamily; + color: $primary-text; + text-align: left; } - .report-instance-table .label { - padding: 14px 20px 6px 20px; - } + .row-content { + flex-basis: 200px; + flex-shrink: 1; + flex-grow: 1; - .report-instance-table .instance-list-row-content { - padding: 6px 20px 14px 20px; + color: $secondary-text; + font-size: 14px; + line-height: 20px; + align-items: flex-end; + display: flex; } } diff --git a/src/tests/unit/tests/common/components/cards/__snapshots__/simple-card-row.test.tsx.snap b/src/tests/unit/tests/common/components/cards/__snapshots__/simple-card-row.test.tsx.snap index 5311d29610a..b998a5ca518 100644 --- a/src/tests/unit/tests/common/components/cards/__snapshots__/simple-card-row.test.tsx.snap +++ b/src/tests/unit/tests/common/components/cards/__snapshots__/simple-card-row.test.tsx.snap @@ -5,12 +5,12 @@ exports[`SimpleCardRow renders 1`] = ` className="row" > test label test content @@ -22,12 +22,12 @@ exports[`SimpleCardRow renders with correct styling with extra class name 1`] = className="row" > test label test content diff --git a/src/tests/unit/tests/common/components/cards/__snapshots__/snippet-card-row.test.tsx.snap b/src/tests/unit/tests/common/components/cards/__snapshots__/snippet-card-row.test.tsx.snap index 7a0b3e8e67a..c0b2953cfaf 100644 --- a/src/tests/unit/tests/common/components/cards/__snapshots__/snippet-card-row.test.tsx.snap +++ b/src/tests/unit/tests/common/components/cards/__snapshots__/snippet-card-row.test.tsx.snap @@ -3,7 +3,7 @@ exports[`SnippetCardRow renders 1`] = ` diff --git a/src/tests/unit/tests/reports/package/__snapshots__/integration.test.ts.snap b/src/tests/unit/tests/reports/package/__snapshots__/integration.test.ts.snap index b5aec8bc593..b00bc7a9560 100644 --- a/src/tests/unit/tests/reports/package/__snapshots__/integration.test.ts.snap +++ b/src/tests/unit/tests/reports/package/__snapshots__/integration.test.ts.snap @@ -726,12 +726,12 @@ exports[`report package integration with issues 1`] = ` class="row" > Path html @@ -740,12 +740,12 @@ exports[`report package integration with issues 1`] = ` class="row" > Snippet <html class="deque-axe-is-ready"> @@ -754,12 +754,12 @@ exports[`report package integration with issues 1`] = ` class="row" > How to fix
Path li:nth-child(1) > a[href="\\#"] @@ -961,12 +961,12 @@ exports[`report package integration with issues 1`] = ` class="row" > Snippet <a href="#">About</a> @@ -975,12 +975,12 @@ exports[`report package integration with issues 1`] = ` class="row" > How to fix
Path li:nth-child(2) > a[href="\\#"] @@ -1069,12 +1069,12 @@ exports[`report package integration with issues 1`] = ` class="row" > Snippet <a href="#">Academics</a> @@ -1083,12 +1083,12 @@ exports[`report package integration with issues 1`] = ` class="row" > How to fix
Path li:nth-child(3) > a[href="\\#"] @@ -1177,12 +1177,12 @@ exports[`report package integration with issues 1`] = ` class="row" > Snippet <a href="#">Admissions</a> @@ -1191,12 +1191,12 @@ exports[`report package integration with issues 1`] = ` class="row" > How to fix
Path li:nth-child(4) > a[href="\\#"] @@ -1285,12 +1285,12 @@ exports[`report package integration with issues 1`] = ` class="row" > Snippet <a href="#">Visitors</a> @@ -1299,12 +1299,12 @@ exports[`report package integration with issues 1`] = ` class="row" > How to fix
Path html @@ -1525,12 +1525,12 @@ exports[`report package integration with issues 1`] = ` class="row" > Snippet <html class="deque-axe-is-ready"> @@ -1539,12 +1539,12 @@ exports[`report package integration with issues 1`] = ` class="row" > How to fix
Path img[src$="slide2\\.jpg"] @@ -1740,12 +1740,12 @@ exports[`report package integration with issues 1`] = ` class="row" > Snippet <img src="images/slide2.jpg"> @@ -1754,12 +1754,12 @@ exports[`report package integration with issues 1`] = ` class="row" > How to fix
Path img[src$="arrow-left\\.png"] @@ -1838,12 +1838,12 @@ exports[`report package integration with issues 1`] = ` class="row" > Snippet <img src="images/arrow-left.png"> @@ -1852,12 +1852,12 @@ exports[`report package integration with issues 1`] = ` class="row" > How to fix
Path img[src$="arrow-right\\.png"] @@ -1936,12 +1936,12 @@ exports[`report package integration with issues 1`] = ` class="row" > Snippet <img src="images/arrow-right.png"> @@ -1950,12 +1950,12 @@ exports[`report package integration with issues 1`] = ` class="row" > How to fix
Path img[src$="captcha\\.png"] @@ -2034,12 +2034,12 @@ exports[`report package integration with issues 1`] = ` class="row" > Snippet <img src="images/captcha.png"> @@ -2048,12 +2048,12 @@ exports[`report package integration with issues 1`] = ` class="row" > How to fix
Path input[name="name"] @@ -2274,12 +2274,12 @@ exports[`report package integration with issues 1`] = ` class="row" > Snippet <input type="text" name="name"> @@ -2288,12 +2288,12 @@ exports[`report package integration with issues 1`] = ` class="row" > How to fix
Path input[name="email"] @@ -2369,12 +2369,12 @@ exports[`report package integration with issues 1`] = ` class="row" > Snippet <input type="text" name="email"> @@ -2383,12 +2383,12 @@ exports[`report package integration with issues 1`] = ` class="row" > How to fix
Path input[name="city"] @@ -2464,12 +2464,12 @@ exports[`report package integration with issues 1`] = ` class="row" > Snippet <input type="text" name="city"> @@ -2478,12 +2478,12 @@ exports[`report package integration with issues 1`] = ` class="row" > How to fix
Path input[name="state"] @@ -2559,12 +2559,12 @@ exports[`report package integration with issues 1`] = ` class="row" > Snippet <input type="text" name="state"> @@ -2573,12 +2573,12 @@ exports[`report package integration with issues 1`] = ` class="row" > How to fix
Path input[name="zip"] @@ -2654,12 +2654,12 @@ exports[`report package integration with issues 1`] = ` class="row" > Snippet <input type="text" name="zip"> @@ -2668,12 +2668,12 @@ exports[`report package integration with issues 1`] = ` class="row" > How to fix
Path input[name="country"] @@ -2749,12 +2749,12 @@ exports[`report package integration with issues 1`] = ` class="row" > Snippet <input type="text" name="country"> @@ -2763,12 +2763,12 @@ exports[`report package integration with issues 1`] = ` class="row" > How to fix
Path input[name="major_cs"] @@ -2844,12 +2844,12 @@ exports[`report package integration with issues 1`] = ` class="row" > Snippet <input type="checkbox" name="major_cs"> @@ -2858,12 +2858,12 @@ exports[`report package integration with issues 1`] = ` class="row" > How to fix
Path input[name="major_eng"] @@ -2939,12 +2939,12 @@ exports[`report package integration with issues 1`] = ` class="row" > Snippet <input type="checkbox" name="major_eng"> @@ -2953,12 +2953,12 @@ exports[`report package integration with issues 1`] = ` class="row" > How to fix
Path input[name="major_econ"] @@ -3034,12 +3034,12 @@ exports[`report package integration with issues 1`] = ` class="row" > Snippet <input type="checkbox" name="major_econ"> @@ -3048,12 +3048,12 @@ exports[`report package integration with issues 1`] = ` class="row" > How to fix
Path input[name="major_phy"] @@ -3129,12 +3129,12 @@ exports[`report package integration with issues 1`] = ` class="row" > Snippet <input type="checkbox" name="major_phy"> @@ -3143,12 +3143,12 @@ exports[`report package integration with issues 1`] = ` class="row" > How to fix
Path input[name="major_psy"] @@ -3224,12 +3224,12 @@ exports[`report package integration with issues 1`] = ` class="row" > Snippet <input type="checkbox" name="major_psy"> @@ -3238,12 +3238,12 @@ exports[`report package integration with issues 1`] = ` class="row" > How to fix
Path input[name="major_sp"] @@ -3319,12 +3319,12 @@ exports[`report package integration with issues 1`] = ` class="row" > Snippet <input type="checkbox" name="major_sp"> @@ -3333,12 +3333,12 @@ exports[`report package integration with issues 1`] = ` class="row" > How to fix
Path input[name="captcha"] @@ -3414,12 +3414,12 @@ exports[`report package integration with issues 1`] = ` class="row" > Snippet <input type="text" name="captcha"> @@ -3428,12 +3428,12 @@ exports[`report package integration with issues 1`] = ` class="row" > How to fix
Path html @@ -3640,12 +3640,12 @@ exports[`report package integration with issues 1`] = ` class="row" > Snippet <html class="deque-axe-is-ready"> @@ -3654,12 +3654,12 @@ exports[`report package integration with issues 1`] = ` class="row" > How to fix
Path html @@ -3854,12 +3854,12 @@ exports[`report package integration with issues 1`] = ` class="row" > Snippet <html class="deque-axe-is-ready"> @@ -3868,12 +3868,12 @@ exports[`report package integration with issues 1`] = ` class="row" > How to fix
Path html @@ -4068,12 +4068,12 @@ exports[`report package integration with issues 1`] = ` class="row" > Snippet <html class="deque-axe-is-ready"> @@ -4082,12 +4082,12 @@ exports[`report package integration with issues 1`] = ` class="row" > How to fix