From 38120b9fca86f9c6e5b0204fc002d6f15fe1a852 Mon Sep 17 00:00:00 2001
From: Kyle Knight <kyle@kolide.co>
Date: Wed, 11 Jan 2017 14:35:45 -0600
Subject: [PATCH] Sidebar, titles, and descriptions should now force wrap or
 ellipsis (#905)

* Sidebar, titles, and descriptions should now force wrap or ellipsis

* Fixing lint issue
---
 .../packs/EditPackFormWrapper/_styles.scss    |  3 +++
 .../packs/PacksList/Row/_styles.scss          |  2 ++
 .../QueriesListRow/QueriesListRow.jsx         |  2 +-
 .../QueriesList/QueriesListRow/_styles.scss   |  5 +++++
 .../ScheduledQueriesListItem.jsx              |  2 +-
 .../queries/ScheduledQueriesList/_styles.scss |  5 +++++
 .../PackDetailsSidePanel.jsx                  |  6 ++++--
 .../ScheduledQueriesSection.jsx               | 21 +++++++++++--------
 .../PackDetailsSidePanel/_styles.scss         | 10 +++++++++
 .../QueryDetailsSidePanel.jsx                 |  2 +-
 .../QueryDetailsSidePanel/_styles.scss        |  5 +++++
 .../SearchPackQuery/_styles.scss              |  2 ++
 12 files changed, 51 insertions(+), 14 deletions(-)

diff --git a/frontend/components/packs/EditPackFormWrapper/_styles.scss b/frontend/components/packs/EditPackFormWrapper/_styles.scss
index cf0f4edb78..37a006995b 100644
--- a/frontend/components/packs/EditPackFormWrapper/_styles.scss
+++ b/frontend/components/packs/EditPackFormWrapper/_styles.scss
@@ -4,6 +4,8 @@
   }
 
   &__title {
+    @include ellipsis(80%);
+
     .kolidecon {
       color: $accent-dark;
     }
@@ -15,5 +17,6 @@
     line-height: 2;
     color: $text-medium;
     max-width: 800px;
+    word-wrap: break-word;
   }
 }
diff --git a/frontend/components/packs/PacksList/Row/_styles.scss b/frontend/components/packs/PacksList/Row/_styles.scss
index 0641efcefa..953f109ca1 100644
--- a/frontend/components/packs/PacksList/Row/_styles.scss
+++ b/frontend/components/packs/PacksList/Row/_styles.scss
@@ -28,6 +28,8 @@
   }
 
   &__td-pack-name {
+    @include ellipsis(110px);
+    display: table-cell;
     text-align: left;
   }
 
diff --git a/frontend/components/queries/QueriesList/QueriesListRow/QueriesListRow.jsx b/frontend/components/queries/QueriesList/QueriesListRow/QueriesListRow.jsx
index 1c19c64d6d..a21b82018e 100644
--- a/frontend/components/queries/QueriesList/QueriesListRow/QueriesListRow.jsx
+++ b/frontend/components/queries/QueriesList/QueriesListRow/QueriesListRow.jsx
@@ -56,7 +56,7 @@ class QueriesListRow extends Component {
             value={checked}
           />
         </td>
-        <td>{name}</td>
+        <td className={`${baseClass}__name`}>{name}</td>
         <td className={`${baseClass}__author-name`}>{authorName}</td>
         <td>{lastModifiedDate}</td>
       </ClickableTableRow>
diff --git a/frontend/components/queries/QueriesList/QueriesListRow/_styles.scss b/frontend/components/queries/QueriesList/QueriesListRow/_styles.scss
index a305fa76f9..2621f8137d 100644
--- a/frontend/components/queries/QueriesList/QueriesListRow/_styles.scss
+++ b/frontend/components/queries/QueriesList/QueriesListRow/_styles.scss
@@ -21,4 +21,9 @@
       margin: 0;
     }
   }
+
+  &__name {
+    @include ellipsis(120px);
+    display: table-cell;
+  }
 }
diff --git a/frontend/components/queries/ScheduledQueriesList/ScheduledQueriesListItem/ScheduledQueriesListItem.jsx b/frontend/components/queries/ScheduledQueriesList/ScheduledQueriesListItem/ScheduledQueriesListItem.jsx
index 22aa1a22c7..fcff96861e 100644
--- a/frontend/components/queries/ScheduledQueriesList/ScheduledQueriesListItem/ScheduledQueriesListItem.jsx
+++ b/frontend/components/queries/ScheduledQueriesList/ScheduledQueriesListItem/ScheduledQueriesListItem.jsx
@@ -58,7 +58,7 @@ class ScheduledQueriesListItem extends Component {
             value={checked}
           />
         </td>
-        <td>{name}</td>
+        <td className="scheduled-queries-list__query-name">{name}</td>
         <td>{interval}</td>
         <td><PlatformIcon name={platform} /></td>
         <td>{version}</td>
diff --git a/frontend/components/queries/ScheduledQueriesList/_styles.scss b/frontend/components/queries/ScheduledQueriesList/_styles.scss
index 3619112775..57f33f6538 100644
--- a/frontend/components/queries/ScheduledQueriesList/_styles.scss
+++ b/frontend/components/queries/ScheduledQueriesList/_styles.scss
@@ -161,4 +161,9 @@
       color: $text-dark;
     }
   }
+
+  &__query-name {
+    @include ellipsis(110px);
+    display: table-cell;
+  }
 }
diff --git a/frontend/components/side_panels/PackDetailsSidePanel/PackDetailsSidePanel.jsx b/frontend/components/side_panels/PackDetailsSidePanel/PackDetailsSidePanel.jsx
index 92a6671be5..471c4c6c5e 100644
--- a/frontend/components/side_panels/PackDetailsSidePanel/PackDetailsSidePanel.jsx
+++ b/frontend/components/side_panels/PackDetailsSidePanel/PackDetailsSidePanel.jsx
@@ -31,8 +31,10 @@ const PackDetailsSidePanel = ({ onUpdateSelectedPack, pack, scheduledQueries = [
 
   return (
     <SecondarySidePanelContainer className={baseClass}>
-      <Icon className={`${baseClass}__pack-icon`} name="packs" />
-      <span className={`${baseClass}__pack-name`}>{pack.name}</span>
+      <h2 className={`${baseClass}__pack-name`}>
+        <Icon className={`${baseClass}__pack-icon`} name="packs" />
+        <span>{pack.name}</span>
+      </h2>
       <Slider
         activeText="ENABLED"
         inactiveText="DISABLED"
diff --git a/frontend/components/side_panels/PackDetailsSidePanel/ScheduledQueriesSection.jsx b/frontend/components/side_panels/PackDetailsSidePanel/ScheduledQueriesSection.jsx
index 77058694c1..80732ebf69 100644
--- a/frontend/components/side_panels/PackDetailsSidePanel/ScheduledQueriesSection.jsx
+++ b/frontend/components/side_panels/PackDetailsSidePanel/ScheduledQueriesSection.jsx
@@ -53,16 +53,19 @@ class ScheduledQueriesSection extends Component {
     const queriesToRender = showAllQueries ? scheduledQueries : take(scheduledQueries, DEFAULT_NUM_QUERIES);
 
     return (
-      <div>
+      <div className={`${baseClass}__scheduled-queries`}>
         <p className={`${baseClass}__section-label`}>Queries</p>
-        {queriesToRender.map((scheduledQuery) => {
-          return (
-            <div key={`scheduled-query-${scheduledQuery.id}`}>
-              <Icon className={`${baseClass}__query-icon`} name="query" />
-              <span className={`${baseClass}__query-name`}>{scheduledQuery.name}</span>
-            </div>
-          );
-        })}
+
+        <ul className={`${baseClass}__queries-list`}>
+          {queriesToRender.map((scheduledQuery) => {
+            return (
+              <li key={`scheduled-query-${scheduledQuery.id}`}>
+                <Icon className={`${baseClass}__query-icon`} name="query" />
+                <span className={`${baseClass}__query-name`}>{scheduledQuery.name}</span>
+              </li>
+            );
+          })}
+        </ul>
         {renderShowMoreQueries()}
       </div>
     );
diff --git a/frontend/components/side_panels/PackDetailsSidePanel/_styles.scss b/frontend/components/side_panels/PackDetailsSidePanel/_styles.scss
index 939db496f5..76ab353db5 100644
--- a/frontend/components/side_panels/PackDetailsSidePanel/_styles.scss
+++ b/frontend/components/side_panels/PackDetailsSidePanel/_styles.scss
@@ -4,6 +4,7 @@
   &__description {
     color: $text-medium;
     font-size: 14px;
+    word-wrap: break-word;
   }
 
   &__section-label {
@@ -42,6 +43,7 @@
   }
 
   &__pack-name {
+    @include ellipsis(250px);
     color: $text-dark;
     font-size: 18px;
     font-weight: $bold;
@@ -54,8 +56,16 @@
     margin-right: 15px;
   }
 
+  &__queries-list {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+  }
+
   &__query-name {
+    @include ellipsis(240px);
     color: $text-medium;
     font-size: 16px;
+    vertical-align: bottom;
   }
 }
diff --git a/frontend/components/side_panels/QueryDetailsSidePanel/QueryDetailsSidePanel.jsx b/frontend/components/side_panels/QueryDetailsSidePanel/QueryDetailsSidePanel.jsx
index 364e589108..8a3e6a36a2 100644
--- a/frontend/components/side_panels/QueryDetailsSidePanel/QueryDetailsSidePanel.jsx
+++ b/frontend/components/side_panels/QueryDetailsSidePanel/QueryDetailsSidePanel.jsx
@@ -62,7 +62,7 @@ class QueryDetailsSidePanel extends Component {
           wrapEnabled
         />
         <h2>Description</h2>
-        <p>{description}</p>
+        <p className={`${baseClass}__description`}>{description}</p>
         <h2>Packs</h2>
         {renderPacks()}
       </SecondarySidePanelContainer>
diff --git a/frontend/components/side_panels/QueryDetailsSidePanel/_styles.scss b/frontend/components/side_panels/QueryDetailsSidePanel/_styles.scss
index 749b542aa9..a762107e2b 100644
--- a/frontend/components/side_panels/QueryDetailsSidePanel/_styles.scss
+++ b/frontend/components/side_panels/QueryDetailsSidePanel/_styles.scss
@@ -2,6 +2,7 @@
   padding: 20px;
 
   h1 {
+    @include ellipsis(250px);
     margin: 0 0 12px;
     font-size: 18px;
     font-weight: $bold;
@@ -33,6 +34,10 @@
     margin-bottom: 12px;
   }
 
+  &__description {
+    word-wrap: break-word;
+  }
+
   .button {
     width: 100%;
   }
diff --git a/frontend/components/side_panels/ScheduleQuerySidePanel/SearchPackQuery/_styles.scss b/frontend/components/side_panels/ScheduleQuerySidePanel/SearchPackQuery/_styles.scss
index 58b31fbb49..18211ea183 100644
--- a/frontend/components/side_panels/ScheduleQuerySidePanel/SearchPackQuery/_styles.scss
+++ b/frontend/components/side_panels/ScheduleQuerySidePanel/SearchPackQuery/_styles.scss
@@ -1,5 +1,6 @@
 .search-pack-query {
   &__title {
+    @include ellipsis(250px);
     font-size: 18px;
     font-weight: $bold;
     letter-spacing: -0.5px;
@@ -17,6 +18,7 @@
 
   &__description {
     margin: 0 0 30px;
+    word-wrap: break-word;
 
     h2 {
       font-size: 16px;