SONAR-20282 Styling fixes for multiple issue box

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);
 }

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')};