From 9d3e7f62caa35cc49abc0626399ede8087cf56de Mon Sep 17 00:00:00 2001
From: Mark McDowall <mark@mcdowall.ca>
Date: Sun, 5 Dec 2021 10:07:43 -0800
Subject: [PATCH] Fixed: Overflowing release profile terms

(cherry picked from commit b90e25f652dcee3b9510a6f148a8d7a32a1ebe58)
---
 frontend/src/Components/Form/TagInputTag.css    | 17 ++++++++++++++++-
 .../src/Components/Form/TagInputTag.css.d.ts    |  2 ++
 frontend/src/Components/Form/TagInputTag.js     |  5 +++--
 .../Indexers/Restrictions/Restriction.css       |  6 ++++++
 .../Indexers/Restrictions/Restriction.css.d.ts  |  1 +
 .../Indexers/Restrictions/Restriction.js        |  2 ++
 6 files changed, 30 insertions(+), 3 deletions(-)

diff --git a/frontend/src/Components/Form/TagInputTag.css b/frontend/src/Components/Form/TagInputTag.css
index d8c8262082..97adac5c19 100644
--- a/frontend/src/Components/Form/TagInputTag.css
+++ b/frontend/src/Components/Form/TagInputTag.css
@@ -2,12 +2,21 @@
   display: flex;
   justify-content: center;
   flex-direction: column;
+  max-width: 100%;
   height: 31px;
 }
 
 .link {
   composes: link from '~Components/Link/Link.css';
 
+  max-width: 100%;
+  line-height: 1px;
+}
+
+.linkWithEdit {
+  composes: link from '~Components/Link/Link.css';
+
+  max-width: calc(100% - 9px - 4px - 2px);
   line-height: 1px;
 }
 
@@ -21,5 +30,11 @@
 .editButton {
   composes: button from '~Components/Link/IconButton.css';
 
-  width: auto;
+  width: 9px;
+}
+
+.label {
+  composes: label from '~Components/Label.css';
+
+  max-width: 100%;
 }
diff --git a/frontend/src/Components/Form/TagInputTag.css.d.ts b/frontend/src/Components/Form/TagInputTag.css.d.ts
index 7369eca0e7..510189d2c4 100644
--- a/frontend/src/Components/Form/TagInputTag.css.d.ts
+++ b/frontend/src/Components/Form/TagInputTag.css.d.ts
@@ -3,7 +3,9 @@
 interface CssExports {
   'editButton': string;
   'editContainer': string;
+  'label': string;
   'link': string;
+  'linkWithEdit': string;
   'tag': string;
 }
 export const cssExports: CssExports;
diff --git a/frontend/src/Components/Form/TagInputTag.js b/frontend/src/Components/Form/TagInputTag.js
index cc72f35553..004381924f 100644
--- a/frontend/src/Components/Form/TagInputTag.js
+++ b/frontend/src/Components/Form/TagInputTag.js
@@ -48,20 +48,21 @@ class TagInputTag extends Component {
       kind,
       canEdit
     } = this.props;
+
     return (
       <div
         className={styles.tag}
         tabIndex={-1}
       >
         <Label
+          className={styles.label}
           kind={kind}
         >
           <Link
-            className={styles.link}
+            className={canEdit ? styles.linkWithEdit : styles.link}
             tabIndex={-1}
             onPress={this.onDelete}
           >
-
             {tag.name}
           </Link>
 
diff --git a/frontend/src/Settings/Indexers/Restrictions/Restriction.css b/frontend/src/Settings/Indexers/Restrictions/Restriction.css
index ec6a010561..7ec8595ca7 100644
--- a/frontend/src/Settings/Indexers/Restrictions/Restriction.css
+++ b/frontend/src/Settings/Indexers/Restrictions/Restriction.css
@@ -9,3 +9,9 @@
   flex-wrap: wrap;
   margin-top: 5px;
 }
+
+.label {
+  composes: label from '~Components/Label.css';
+
+  max-width: 100%;
+}
diff --git a/frontend/src/Settings/Indexers/Restrictions/Restriction.css.d.ts b/frontend/src/Settings/Indexers/Restrictions/Restriction.css.d.ts
index 52ba063766..0c2d786162 100644
--- a/frontend/src/Settings/Indexers/Restrictions/Restriction.css.d.ts
+++ b/frontend/src/Settings/Indexers/Restrictions/Restriction.css.d.ts
@@ -2,6 +2,7 @@
 // Please do not change this file!
 interface CssExports {
   'enabled': string;
+  'label': string;
   'restriction': string;
 }
 export const cssExports: CssExports;
diff --git a/frontend/src/Settings/Indexers/Restrictions/Restriction.js b/frontend/src/Settings/Indexers/Restrictions/Restriction.js
index 99522b497f..458ce868a0 100644
--- a/frontend/src/Settings/Indexers/Restrictions/Restriction.js
+++ b/frontend/src/Settings/Indexers/Restrictions/Restriction.js
@@ -77,6 +77,7 @@ class Restriction extends Component {
 
               return (
                 <Label
+                  className={styles.label}
                   key={item}
                   kind={kinds.SUCCESS}
                 >
@@ -96,6 +97,7 @@ class Restriction extends Component {
 
               return (
                 <Label
+                  className={styles.label}
                   key={item}
                   kind={kinds.DANGER}
                 >