SONAR-20282 Styling fixes for multiple issue box

diff --git a/server/sonar-web/design-system/src/components/__tests__/__snapshots__/LineFinding-test.tsx.snap b/server/sonar-web/design-system/src/components/__tests__/__snapshots__/LineFinding-test.tsx.snap
index 1d6ffe7a20d2e061b8c9370ff0a3708cb5b27b77..2e497815d1305da6d25360f3fa363aa2227f5296 100644 (file)
--- a/server/sonar-web/design-system/src/components/__tests__/__snapshots__/LineFinding-test.tsx.snap
+++ b/server/sonar-web/design-system/src/components/__tests__/__snapshots__/LineFinding-test.tsx.snap
@@ -17,17 +17,19 @@ exports[`should render correctly 1`] = `
   margin-right: 0.25rem;
   margin-top: 0.75rem;
   margin-bottom: 0.75rem;
-  padding: 0.75rem;
+  border-radius: 0.25rem;
+  padding-left: 0.75rem;
+  padding-right: 0.75rem;
+  width: 100%;
+  box-sizing: border-box;
+  padding-top: 0.75rem;
+  padding-bottom: 0.75rem;
   font-family: Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
   font-size: 1rem;
   line-height: 1.5rem;
   font-weight: 600;
-  border-radius: 0.25rem;
-  width: 100%;
-  box-sizing: border-box;
   border: 1px solid rgb(253,162,155);
   color: rgb(62,67,87);
-  font-weight: 600;
   word-break: break-word;
   background-color: rgb(255,255,255);
 }

diff --git a/server/sonar-web/design-system/src/components/code-line/LineFinding.tsx b/server/sonar-web/design-system/src/components/code-line/LineFinding.tsx
index 0e52b0ef1c68e18bd6899fcd6723e37b90c3f2c7..f2f613c382090f56718e44a061ab04fe612122e3 100644 (file)
--- a/server/sonar-web/design-system/src/components/code-line/LineFinding.tsx
+++ b/server/sonar-web/design-system/src/components/code-line/LineFinding.tsx
@@ -57,18 +57,18 @@ export const LineFinding = forwardRef<HTMLElement, Props>(LineFindingFunc);
 const LineFindingStyled = styled(BareButton)<{ selected: boolean }>`
   ${tw`sw-flex sw-gap-2 sw-items-center`}
   ${tw`sw-my-3 sw-mx-1`}
-  ${tw`sw-p-3`}
-  ${tw`sw-body-md-highlight`}
   ${tw`sw-rounded-1`}
+  ${tw`sw-px-3`}
   ${tw`sw-w-full`}
   ${tw`sw-box-border`}
+  ${(props) => (props.selected ? tw`sw-py-3` : tw`sw-py-2`)};
+  ${(props) => (props.selected ? tw`sw-body-md-highlight` : tw`sw-body-sm`)};
 
   border: ${(props) =>
     props.selected
       ? themeBorder('default', 'issueBoxSelectedBorder')
       : themeBorder('default', 'issueBoxBorder')};
   color: ${themeContrast('pageBlock')};
-  font-weight: ${(props) => (props.selected ? 600 : 400)};
   word-break: break-word;
   background-color: ${themeColor('pageBlock')};