fix elipsified text in operator dropdown

LederCards · May 1, 2024 · 7c9a4c0 · 7c9a4c0
1 parent ec36c8f
commit 7c9a4c0
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 44 deletions.
diff --git a/src/app/advanced/advanced.page.html b/src/app/advanced/advanced.page.html
@@ -98,7 +98,8 @@
   <ion-col class="search" [sizeXs]="12" [sizeMd]="6">
     <ion-row>
       <ion-col size="6">
-        <ion-select interface="popover" [(ngModel)]="searchQuery.meta[filter.prop].operator" (ionChange)="saveQuery()">
+        <ion-select interface="popover" [(ngModel)]="searchQuery.meta[filter.prop].operator" (ionChange)="saveQuery()"
+          [interfaceOptions]="{ cssClass: 'operator-select' }">
           <ion-select-option *ngFor="let operator of allOperators" [value]="operator.value">
             {{ operator.label }}
           </ion-select-option>

diff --git a/src/app/advanced/advanced.page.scss b/src/app/advanced/advanced.page.scss
@@ -50,55 +50,16 @@
     font-size: 0.7rem;
     font-style: italic;
   }
-
-  .triggers {
-    flex-wrap: wrap;
-
-    ion-col {
-      flex-basis: 50%;
-
-      .label-custom-icon {
-        display: flex;
-        align-items: center;
-
-        app-cardicon {
-          margin-right: 0.5em;
-        }
-      }
-    }
-  }
-
-  .color-B {
-    --background-checked: #00587c;
-  }
-
-  .color-R {
-    --background-checked: #6a111b;
-  }
-
-  .color-G {
-    --background-checked: #21613d;
-  }
-
-  .color-Y {
-    --background-checked: #7d700c;
-  }
-
-  .color-white {
-    --background-checked: #fff;
-    --checkmark-color: #000;
-  }
-
-  .color-black {
-    --background-checked: #000;
-    --checkmark-color: #fff;
-  }
 }
 
 .actions {
   padding-top: 0.5em;
 }
 
+ion-list {
+  --width: 270px;
+}
+
 // The "pointer: fine" media feature tests whether
 // the user has a pointing device (Desktop)
 @media (pointer: fine) {
@@ -111,3 +72,7 @@
     background-color: var(--ion-background-color);
   }
 }
+
+::ng-deep .operator-select {
+  --width: 270px;
+}