SONAR-21216 Adapt Issues action bar for small screens

diff --git a/server/sonar-web/src/main/js/apps/issues/components/IssueHeader.tsx b/server/sonar-web/src/main/js/apps/issues/components/IssueHeader.tsx
index 0d549a6b6cf8b42ed18d082cea0273df38f39368..2ddcaf5f43683ec50208a3aa559a24833da652bb 100644 (file)
--- a/server/sonar-web/src/main/js/apps/issues/components/IssueHeader.tsx
+++ b/server/sonar-web/src/main/js/apps/issues/components/IssueHeader.tsx
@@ -162,7 +162,7 @@ export default class IssueHeader extends React.PureComponent<Props, State> {
 
     return (
       <header className="sw-flex sw-mb-6">
-        <div className="sw-mr-8 sw-flex-1 sw-flex sw-flex-col sw-gap-4">
+        <div className="sw-mr-8 sw-flex-1 sw-flex sw-flex-col sw-gap-4 sw-min-w-0">
           <div className="sw-flex sw-flex-col sw-gap-2">
             <div className="sw-flex sw-items-center">
               <PageContentFontWrapper className="sw-body-md-highlight" as="h1">

diff --git a/server/sonar-web/src/main/js/apps/issues/components/IssuesApp.tsx b/server/sonar-web/src/main/js/apps/issues/components/IssuesApp.tsx
index 701f313f5ada218c27919cf9165ec2f6f897fc9f..22fbcea6e2b96cffcca6f7f3d63519db708e9fe8 100644 (file)
--- a/server/sonar-web/src/main/js/apps/issues/components/IssuesApp.tsx
+++ b/server/sonar-web/src/main/js/apps/issues/components/IssuesApp.tsx
@@ -1340,7 +1340,7 @@ export class App extends React.PureComponent<Props, State> {
 
               {this.renderSide(openIssue)}
 
-              <main className="sw-relative sw-ml-12 sw-flex-1">{this.renderPage()}</main>
+              <main className="sw-relative sw-ml-12 sw-flex-1 sw-min-w-0">{this.renderPage()}</main>
             </div>
           </PageContentFontWrapper>
         </LargeCenteredLayout>

diff --git a/server/sonar-web/src/main/js/components/issue/components/IssueActionsBar.tsx b/server/sonar-web/src/main/js/components/issue/components/IssueActionsBar.tsx
index d40741f378a0b5befc32cf4e11e7e7ac80d08dae..2e14e9daf2d87f08a4a365fe62ecc78e4497fe6f 100644 (file)
--- a/server/sonar-web/src/main/js/components/issue/components/IssueActionsBar.tsx
+++ b/server/sonar-web/src/main/js/components/issue/components/IssueActionsBar.tsx
@@ -63,8 +63,8 @@ export default function IssueActionsBar(props: Readonly<Props>) {
   const tagsPopupOpen = currentPopup === 'edit-tags' && canSetTags;
 
   return (
-    <div className="sw-flex sw-gap-3">
-      <ul className="it__issue-header-actions sw-flex sw-items-center sw-gap-3 sw-body-sm">
+    <div className="sw-flex sw-gap-3 sw-min-w-0">
+      <ul className="it__issue-header-actions sw-flex sw-items-center sw-gap-3 sw-body-sm sw-min-w-0">
         <HighlightRing
           as="li"
           className="sw-relative"
@@ -78,7 +78,7 @@ export default function IssueActionsBar(props: Readonly<Props>) {
           />
         </HighlightRing>
 
-        <li>
+        <li className="sw-min-w-0">
           <IssueAssign
             isOpen={currentPopup === 'assign'}
             togglePopup={togglePopup}

diff --git a/server/sonar-web/src/main/js/components/issue/components/IssueMetaBar.tsx b/server/sonar-web/src/main/js/components/issue/components/IssueMetaBar.tsx
index d4ae59b6c895e7abf386eb82964fc0062c53f9d5..ce454048545f2413e851f36c69faf05ff975976f 100644 (file)
--- a/server/sonar-web/src/main/js/components/issue/components/IssueMetaBar.tsx
+++ b/server/sonar-web/src/main/js/components/issue/components/IssueMetaBar.tsx
@@ -51,7 +51,7 @@ export default function IssueMetaBar(props: Readonly<Props>) {
     'sw-body-xs sw-overflow-hidden sw-whitespace-nowrap sw-max-w-abs-150';
 
   return (
-    <ul className="sw-flex sw-items-center sw-gap-1 sw-body-xs">
+    <ul className="sw-flex sw-items-center sw-gap-1 sw-body-xs sw-whitespace-nowrap">
       {issue.line && (
         <>
           <IssueMetaListItem className={issueMetaListItemClassNames}>

diff --git a/server/sonar-web/src/main/js/components/issue/components/IssueView.tsx b/server/sonar-web/src/main/js/components/issue/components/IssueView.tsx
index 17fb651938dc8a2383e04a4328126f081703878f..241e717a33c9c0e4d2529a0fadfe5311f96d2977 100644 (file)
--- a/server/sonar-web/src/main/js/components/issue/components/IssueView.tsx
+++ b/server/sonar-web/src/main/js/components/issue/components/IssueView.tsx
@@ -108,7 +108,7 @@ export default class IssueView extends React.PureComponent<Props> {
             </span>
           )}
 
-          <div className="sw-flex sw-flex-col sw-grow sw-gap-3">
+          <div className="sw-flex sw-flex-col sw-grow sw-gap-3 sw-min-w-0">
             <IssueTitleBar
               branchLike={branchLike}
               displayWhyIsThisAnIssue={displayWhyIsThisAnIssue}
@@ -130,7 +130,7 @@ export default class IssueView extends React.PureComponent<Props> {
 
             <BasicSeparator />
 
-            <div className="sw-flex sw-gap-2 sw-flex-wrap sw-items-center sw-justify-between">
+            <div className="sw-flex sw-gap-2 sw-flex-nowrap sw-items-center sw-justify-between">
               <IssueActionsBar
                 currentPopup={currentPopup}
                 issue={issue}