avoid cutting off right component on small screens

WPS · Nov 11, 2024 · 71065d5 · 71065d5
1 parent 3235392
commit 71065d5
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 16 deletions.
diff --git a/...icon-set-config/presentation/icon-set-configuration/icon-set-configuration.component.html b/...icon-set-config/presentation/icon-set-configuration/icon-set-configuration.component.html
@@ -2,14 +2,14 @@
   <div>
     <div class="header">
       <div class="searchbar">
-        <div>Filter by assignment:</div>
+        <div>Filter:</div>
         <button
           mat-button
           [class.activeNone]="(filter | async) === 'ICON_FILTER_UNASSIGNED'"
           title="Unassigned Icons"
           (click)="filterForUnassigned()"
         >
-          <span>None</span>
+          <span>Unassigned</span>
         </button>
         <button
           mat-button

diff --git a/...icon-set-config/presentation/icon-set-configuration/icon-set-configuration.component.scss b/...icon-set-config/presentation/icon-set-configuration/icon-set-configuration.component.scss
@@ -1,6 +1,6 @@
 .content {
   display: grid;
-  grid-template-columns: auto 250px;
+  grid-template-columns: auto 150px;
 }
 
 .header {
@@ -20,16 +20,17 @@
   height: inherit;
 }
 
+button {
+  letter-spacing: 0.05em;
+  line-height: 0.9rem;
+}
+
 .buttons {
   display: inline-flex;
   align-self: center;
   align-items: center;
   justify-self: right;
   height: inherit;
-
-  ::ng-deep.mat-button {
-    min-width: 36px;
-  }
 }
 
 .activeNone {
@@ -46,9 +47,7 @@
 }
 
 .textInput {
-  width: 300px;
-  margin-left: 15px;
-  margin-right: 5px;
+  width: 130px;
   border: #666666 1px solid;
   padding: 0.25rem 0.5rem;
   border-radius: 0.25rem;
@@ -70,10 +69,6 @@
   }
 }
 
-.iconSetDetails {
-  width: 250px;
-}
-
 ::ng-deep.mat-grid-tile {
   .mat-grid-tile-content {
     justify-content: inherit;

diff --git a/src/app/tools/icon-set-config/presentation/icon-set-details/icon-set-details.component.scss b/src/app/tools/icon-set-config/presentation/icon-set-details/icon-set-details.component.scss
@@ -5,7 +5,7 @@
   grid-row-gap: 1px;
   overflow-y: auto;
   overflow-x: auto;
-  width: 250px;
+
   border-left: solid 1px #ccc;
 }
 
@@ -39,7 +39,6 @@
 }
 
 .inputWidth {
-  width: 200px;
   margin-left: 15px;
 }