diff --git a/apps/browser/src/popup/scss/base.scss b/apps/browser/src/popup/scss/base.scss
index 8803c73aa6..92c38773da 100644
--- a/apps/browser/src/popup/scss/base.scss
+++ b/apps/browser/src/popup/scss/base.scss
@@ -536,10 +536,23 @@ main {
}
border-radius: $border-radius;
padding: 6px 10px;
- width: 160px;
+ width: auto;
+ max-width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
+ .org-filter-text-container {
+ // src: https://css-tricks.com/snippets/css/truncate-string-with-ellipsis/
+ display: flex;
+ flex: 1;
+ min-width: 0;
+
+ .org-filter-text-name {
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ }
+ }
}
}
.vault-select {
@@ -550,9 +563,8 @@ main {
@include themify($themes) {
background-color: themed("boxBackgroundColor");
}
- margin-right: 5px;
+ margin-right: 18px;
margin-top: 1px;
- width: 160px;
@include themify($themes) {
border: 1px solid themed("borderColor");
}
@@ -560,7 +572,9 @@ main {
button {
border: none;
background: transparent;
- width: 100%;
+ width: auto;
+ max-width: 100%;
+
padding: 5px 10px;
text-align: start;
@include themify($themes) {
@@ -578,6 +592,25 @@ main {
background-color: themed("boxBackgroundHoverColor");
}
}
+
+ i.vault-select-prefix-icon {
+ margin-right: 5px;
+ }
+ i.vault-select-suffix-icon {
+ margin-left: 5px;
+ }
+
+ .vault-select-org-text-container {
+ display: flex;
+ flex: 1;
+ min-width: 0;
+ align-items: center;
+ .vault-select-org-name {
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ }
+ }
}
.border {
@include themify($themes) {
diff --git a/apps/browser/src/popup/vault/vault-select.component.html b/apps/browser/src/popup/vault/vault-select.component.html
index 8ef8c2dc04..a25f49ebf2 100644
--- a/apps/browser/src/popup/vault/vault-select.component.html
+++ b/apps/browser/src/popup/vault/vault-select.component.html
@@ -10,12 +10,16 @@
[attr.aria-expanded]="isOpen"
[attr.aria-label]="vaultFilterDisplay"
>
- {{ vaultFilterDisplay | ellipsis: 45 }}
-
+
+ {{ vaultFilterDisplay }}
+