Fixed words not wrapping when exceeding the max width (#3767)

* fixed issue for exceeding the max width Signed-off-by: Vinay Sharma <vsharma@chef.io> * added review comment changes Signed-off-by: Vinay Sharma <vsharma@chef.io>
chef · May 22, 2020 · 1677062 · 1677062
1 parent c01d606
commit 1677062
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 10 deletions.
diff --git a/...ents/automate-ui/src/app/page-components/services-sidebar/services-sidebar.component.html b/...ents/automate-ui/src/app/page-components/services-sidebar/services-sidebar.component.html
@@ -56,12 +56,12 @@
     <ul>
       <li class="service-item" *ngFor="let service of services$ | async; let i = index">
         <div class="header">
-          <div class ="fqdn-line"><chef-icon>storage</chef-icon> {{ service.fqdn || "--"}}</div>
-          <div class ="supervisor-line"><b>Supervisor:</b> {{ service.supervisor_id || "--"}}</div>
-          <div class ="site-line"><b>Site:</b> {{ service.site  || "--"}}</div>
+          <div class ="fqdn-line"><chef-icon>storage</chef-icon> <p class="fqdn-data">{{ service.fqdn || "--"}}</p></div>
+          <div class ="supervisor-line"><strong>Supervisor:</strong><p class="supervisor-data">{{ service.supervisor_id || "--"}}</p></div>
+          <div class ="site-line"><strong>Site:</strong> <p class="site-data">{{ service.site  || "--"}}</p></div>
         </div>
         <div class="body">
-          <div class ="release-line"><chef-icon>grain</chef-icon>{{ service.release || "--"}}</div>
+          <div class ="release-line"><chef-icon>grain</chef-icon><p class="release-data">{{ service.release || "--"}}</p></div>
           <div class ="channel-line">
             <chef-badge *ngIf="service.update_strategy !== 'NONE'">
               {{ service.channel }}: {{ service.update_strategy }}

diff --git a/...ents/automate-ui/src/app/page-components/services-sidebar/services-sidebar.component.scss b/...ents/automate-ui/src/app/page-components/services-sidebar/services-sidebar.component.scss
@@ -74,35 +74,31 @@ chef-alert {
 
   .fqdn-line {
     display: flex;
-    align-items: center;
     margin-bottom: 8px;
     font-size: 14px;
   }
 
   .supervisor-line {
     display: flex;
-    align-items: center;
     margin-bottom: 4px;
     font-size: 12px;
 
-    b {
+    strong {
       margin-right: 4px;
     }
   }
 
   .site-line {
     display: flex;
-    align-items: center;
     font-size: 12px;
 
-    b {
+    strong {
       margin-right: 4px;
     }
   }
 
   .release-line {
     display: flex;
-    align-items: center;
     margin-bottom: 8px;
     font-size: 14px;
   }
@@ -312,3 +308,21 @@ chef-alert {
   padding-right: 35px;
 }
 
+.fqdn-data {
+  margin-bottom: 0px;
+  word-break: break-all;
+}
+
+.site-data,
+.supervisor-data {
+  margin-bottom: 0px;
+  font-size: 12px;
+  padding-top: 2px;
+  word-break: break-all;
+}
+
+.release-data {
+  margin-bottom: 0px;
+  font-size: 14px;
+  word-break: break-all;
+}
diff --git a/components/automate-ui/src/app/pages/service-groups/service-groups.component.scss b/components/automate-ui/src/app/pages/service-groups/service-groups.component.scss
@@ -408,3 +408,7 @@ chef-radial-chart {
     width: 14px;
   }
 }
+
+chef-td {
+  word-break: break-all;
+}