From: Viktor Vorona <viktor.vorona@sonarsource.com>
Date: Thu, 18 Jan 2024 09:29:57 +0000 (+0100)
Subject: SONAR-21216 Adapt Issues action bar for small screens
X-Git-Tag: 10.4.0.87286~153
X-Git-Url: https://source.dussan.org/?a=commitdiff_plain;h=c27dd1c98186c3148da8c42378bf3b8d1338b1ae;p=sonarqube.git

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 0d549a6b6cf..2ddcaf5f436 100644
--- 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 701f313f5ad..22fbcea6e2b 100644
--- 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 d40741f378a..2e14e9daf2d 100644
--- 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 d4ae59b6c89..ce454048545 100644
--- 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 17fb651938d..241e717a33c 100644
--- 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}