ui: CSS amends (#8905)

* Ensure uls have no overflow-x when overflow is added via JS

* Remove some unused CSS and replace old  route targetting

ui-v2/app/styles/components/app-view.scss

@@ -45,7 +45,7 @@
     display: inline-block;
   }
   // on the instance detail page we don't have the magnifier
-  html.template-instance.template-show h1 {
+  html[data-route$='dc.services.instance.show'] h1 {
     display: block;
   }
   #toolbar-toggle + * {
@@ -54,11 +54,4 @@
   #toolbar-toggle:checked + * {
     display: flex;
   }
-  html.template-service.template-show #toolbar-toggle + * {
-    display: flex;
-    padding: 4px;
-  }
-  html.template-service.template-show .actions {
-    display: none;
-  }
 }

ui-v2/app/styles/components/buttons.scss

@@ -7,8 +7,7 @@ a.type-create {
 // some of this and just use not(aria-haspopup)
 button[type='reset'],
 header .actions button[type='button']:not(.copy-btn),
-button.type-cancel,
-html.template-error div > a {
+button.type-cancel {
   @extend %secondary-button;
 }
 .with-confirmation .type-delete,

ui-v2/app/styles/components/list-collection.scss

@@ -15,7 +15,7 @@
   position: relative;
 }
 %list-collection-scroll-virtual > ul {
-  overflow-x: hidden;
+  overflow-x: hidden !important;
 }
 %list-collection > ul > li:nth-child(2) .with-feedback p {
   bottom: auto;

ui-v2/app/styles/components/tabular-collection.scss

@@ -69,15 +69,12 @@ table.has-actions tr > *:nth-last-child(5):first-child ~ * {
 }
 
 /*TODO: trs only live in tables, get rid of table */
-html.template-policy.template-edit [role='dialog'] table tr,
-html.template-policy.template-edit main table tr,
-html.template-role.template-edit [role='dialog'] table tr,
-html.template-role.template-edit main table.token-list tr {
+html[data-route^='dc.acls.policies.edit'] [role='dialog'] table tr,
+html[data-route^='dc.acls.policies.edit'] table tr,
+html[data-route^='dc.acls.roles.edit'] [role='dialog'] table tr,
+html[data-route^='dc.acls.roles.edit'] main table.token-list tr {
   @extend %tokens-minimal-row;
 }
-html.template-node.template-show main table.sessions tr {
-  @extend %node-sessions-row;
-}
 // this will get auto calculated later in tabular-collection.js
 // keeping this here for reference
 // %services-row > * {
@@ -90,34 +87,3 @@ html.template-node.template-show main table.sessions tr {
 %tokens-minimal-row > *:last-child {
   width: calc(100% - 240px) !important;
 }
-
-@media #{$--horizontal-session-list} {
-  %node-sessions-row > * {
-    // (100% / 7) - (300px / 6) - (120px / 6)
-    width: calc(14.2857% - 50px - 20px);
-  }
-  %node-sessions-row > *:nth-child(2) {
-    width: 300px;
-  }
-  %node-sessions-row > *:nth-last-child(1) {
-    width: 120px;
-  }
-}
-@media #{$--lt-horizontal-session-list} {
-  %node-sessions-row > * {
-    // (100% / 2) - (300px / 2) - (120px / 2)
-    width: calc(50% - 150px - 60px);
-  }
-  %node-sessions-row > *:nth-child(2) {
-    width: 300px;
-  }
-  %node-sessions-row > *:nth-last-child(1) {
-    width: 120px;
-  }
-  %node-sessions-row > *:nth-child(3),
-  %node-sessions-row > *:nth-child(4),
-  %node-sessions-row > *:nth-child(5),
-  %node-sessions-row > *:nth-child(6) {
-    display: none;
-  }
-}

ui-v2/app/styles/layout.scss

@@ -64,7 +64,7 @@ html[data-route$='.edit'] main {
 }
 
 @media #{$--lt-spacious-page-header} {
-  html.template-list:not(.template-kv) main {
+  html[data-route$='.index']:not([data-route^='dc.kv']) .app-view {
     margin-top: 10px;
   }
 }

ui-v2/app/styles/variables/custom-query.scss

@@ -11,9 +11,6 @@ $--lt-horizontal-nav: '(max-width: 849px)';
 $--horizontal-tabs: '(min-width: 615px)';
 $--lt-horizontal-tabs: '(max-width: 614px)';
 
-$--horizontal-session-list: '(min-width: 900px)';
-$--lt-horizontal-session-list: '(max-width: 899px)';
-
 $--min-padding: '(max-width: 600px)';
 $--max-padding: '(min-width: 1260px)';