From 7c9a4c09a971449fd60bbdf8329da08d461a12a3 Mon Sep 17 00:00:00 2001
From: Kyle Kemp <kyle@seiyria.com>
Date: Wed, 1 May 2024 07:21:47 -0500
Subject: [PATCH] fix elipsified text in operator dropdown

---
 src/app/advanced/advanced.page.html |  3 +-
 src/app/advanced/advanced.page.scss | 51 +++++------------------------
 2 files changed, 10 insertions(+), 44 deletions(-)

diff --git a/src/app/advanced/advanced.page.html b/src/app/advanced/advanced.page.html
index 7de7be9..0c0aa60 100644
--- 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
index 27fe5ed..5e72e5f 100644
--- 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;
+}