SONAR-10926 Fix issues alignement

2 files changed, 82 insertions, 98 deletions

diff --git a/server/sonar-web/src/main/js/components/issue/Issue.css b/server/sonar-web/src/main/js/components/issue/Issue.css
index 227241347de..09722b04926 100644
--- a/server/sonar-web/src/main/js/components/issue/Issue.css
+++ b/server/sonar-web/src/main/js/components/issue/Issue.css
@@ -40,14 +40,6 @@
   border-top-color: transparent;
 }
 
-.issue-table {
-  width: 100%;
-}
-
-.issue-table td {
-  vertical-align: top;
-}
-
 .issue-row {
   display: flex;
   margin-bottom: 5px;
@@ -59,16 +51,10 @@
   white-space: nowrap;
 }
 
-.issue-table-meta-cell {
-  width: 1px;
-  padding-right: 5px;
-  white-space: nowrap;
-}
-
 .issue-message {
   flex-grow: 1;
-  padding-left: 10px;
-  padding-right: 10px;
+  padding-left: var(--gridSize);
+  padding-right: var(--gridSize);
   line-height: 1.5;
   font-size: var(--baseFontSize);
   font-weight: 600;
@@ -92,10 +78,17 @@
   background: rgba(75, 159, 213, 0.3);
 }
 
+.issue-actions {
+  display: flex;
+  justify-content: space-between;
+  flex-wrap: wrap;
+  align-items: center;
+  padding-left: var(--gridSize);
+}
+
 .issue-meta-list {
   display: flex;
   align-items: center;
-  padding-left: 10px;
 }
 
 .issue-meta {
@@ -125,8 +118,7 @@
 
 .issue-comments {
   margin-top: 5px;
-  padding-left: 10px;
-  padding-right: 10px;
+  padding-left: var(--gridSize);
   font-size: var(--smallFontSize);
 }
 
diff --git a/server/sonar-web/src/main/js/components/issue/components/IssueActionsBar.js b/server/sonar-web/src/main/js/components/issue/components/IssueActionsBar.js
index fb892131a08..f12909c0f9a 100644
--- a/server/sonar-web/src/main/js/components/issue/components/IssueActionsBar.js
+++ b/server/sonar-web/src/main/js/components/issue/components/IssueActionsBar.js
@@ -93,85 +93,77 @@ export default class IssueActionsBar extends React.PureComponent {
     const hasTransitions = issue.transitions && issue.transitions.length > 0;
 
     return (
-      <table className="issue-table">
-        <tbody>
-          <tr>
-            <td>
-              <ul className="issue-meta-list">
-                <li className="issue-meta">
-                  <IssueType
-                    isOpen={this.props.currentPopup === 'set-type' && canSetSeverity}
-                    issue={issue}
-                    canSetSeverity={canSetSeverity}
-                    togglePopup={this.props.togglePopup}
-                    setIssueProperty={this.setIssueProperty}
-                  />
-                </li>
-                <li className="issue-meta">
-                  <IssueSeverity
-                    isOpen={this.props.currentPopup === 'set-severity' && canSetSeverity}
-                    issue={issue}
-                    canSetSeverity={canSetSeverity}
-                    togglePopup={this.props.togglePopup}
-                    setIssueProperty={this.setIssueProperty}
-                  />
-                </li>
-                <li className="issue-meta">
-                  <IssueTransition
-                    isOpen={this.props.currentPopup === 'transition' && hasTransitions}
-                    issue={issue}
-                    hasTransitions={hasTransitions}
-                    onChange={this.handleTransition}
-                    onFail={this.props.onFail}
-                    togglePopup={this.props.togglePopup}
-                  />
-                </li>
-                <li className="issue-meta">
-                  <IssueAssign
-                    isOpen={this.props.currentPopup === 'assign' && canAssign}
-                    issue={issue}
-                    canAssign={canAssign}
-                    onAssign={this.props.onAssign}
-                    onFail={this.props.onFail}
-                    togglePopup={this.props.togglePopup}
-                  />
-                </li>
-                {issue.effort && (
-                  <li className="issue-meta">
-                    <span className="issue-meta-label">
-                      {translateWithParameters('issue.x_effort', issue.effort)}
-                    </span>
-                  </li>
-                )}
-                {canComment && (
-                  <IssueCommentAction
-                    commentPlaceholder={this.state.commentPlaceholder}
-                    currentPopup={this.props.currentPopup}
-                    issueKey={issue.key}
-                    onChange={this.props.onChange}
-                    onFail={this.props.onFail}
-                    toggleComment={this.toggleComment}
-                  />
-                )}
-              </ul>
-            </td>
-            <td className="issue-table-meta-cell">
-              <ul className="list-inline">
-                <li className="issue-meta js-issue-tags">
-                  <IssueTags
-                    isOpen={this.props.currentPopup === 'edit-tags' && canSetTags}
-                    canSetTags={canSetTags}
-                    issue={issue}
-                    onChange={this.props.onChange}
-                    onFail={this.props.onFail}
-                    togglePopup={this.props.togglePopup}
-                  />
-                </li>
-              </ul>
-            </td>
-          </tr>
-        </tbody>
-      </table>
+      <div className="issue-actions">
+        <ul className="issue-meta-list">
+          <li className="issue-meta">
+            <IssueType
+              canSetSeverity={canSetSeverity}
+              isOpen={this.props.currentPopup === 'set-type' && canSetSeverity}
+              issue={issue}
+              setIssueProperty={this.setIssueProperty}
+              togglePopup={this.props.togglePopup}
+            />
+          </li>
+          <li className="issue-meta">
+            <IssueSeverity
+              canSetSeverity={canSetSeverity}
+              isOpen={this.props.currentPopup === 'set-severity' && canSetSeverity}
+              issue={issue}
+              setIssueProperty={this.setIssueProperty}
+              togglePopup={this.props.togglePopup}
+            />
+          </li>
+          <li className="issue-meta">
+            <IssueTransition
+              hasTransitions={hasTransitions}
+              isOpen={this.props.currentPopup === 'transition' && hasTransitions}
+              issue={issue}
+              onChange={this.handleTransition}
+              onFail={this.props.onFail}
+              togglePopup={this.props.togglePopup}
+            />
+          </li>
+          <li className="issue-meta">
+            <IssueAssign
+              canAssign={canAssign}
+              isOpen={this.props.currentPopup === 'assign' && canAssign}
+              issue={issue}
+              onAssign={this.props.onAssign}
+              onFail={this.props.onFail}
+              togglePopup={this.props.togglePopup}
+            />
+          </li>
+          {issue.effort && (
+            <li className="issue-meta">
+              <span className="issue-meta-label">
+                {translateWithParameters('issue.x_effort', issue.effort)}
+              </span>
+            </li>
+          )}
+          {canComment && (
+            <IssueCommentAction
+              commentPlaceholder={this.state.commentPlaceholder}
+              currentPopup={this.props.currentPopup}
+              issueKey={issue.key}
+              onChange={this.props.onChange}
+              onFail={this.props.onFail}
+              toggleComment={this.toggleComment}
+            />
+          )}
+        </ul>
+        <ul className="list-inline">
+          <li className="issue-meta js-issue-tags">
+            <IssueTags
+              canSetTags={canSetTags}
+              isOpen={this.props.currentPopup === 'edit-tags' && canSetTags}
+              issue={issue}
+              onChange={this.props.onChange}
+              onFail={this.props.onFail}
+              togglePopup={this.props.togglePopup}
+            />
+          </li>
+        </ul>
+      </div>
     );
   }
 }