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}
/>
-
{name} |
+ {name} |
{authorName} |
{lastModifiedDate} |
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}
/>
- {name} |
+ {name} |
{interval} |
|
{version} |
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 (
-
- {pack.name}
+
+
+ {pack.name}
+
+
Queries
- {queriesToRender.map((scheduledQuery) => {
- return (
-
-
- {scheduledQuery.name}
-
- );
- })}
+
+
+ {queriesToRender.map((scheduledQuery) => {
+ return (
+ -
+
+ {scheduledQuery.name}
+
+ );
+ })}
+
{renderShowMoreQueries()}
);
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
/>
Description
- {description}
+ {description}
Packs
{renderPacks()}
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;