bitwarden/browser
1
0
Fork 0
mirror of https://github.com/bitwarden/browser synced 2026-02-02 17:53:41 +00:00
Code Issues Releases Wiki Activity

tweak styling to better handle long value wrapping/truncating

Browse Source
This commit is contained in:
Jonathan Prusik
2025-10-21 11:19:04 -04:00
parent d531f2f57e
commit d3a707df4b
1 changed files with 99 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files

130
apps/browser/src/autofill/popup/settings/autofill-targeting-rules.component.html
View File

@@ -21,7 +21,7 @@
</bit-section>
<bit-section *ngIf="!isLoading">
<bit-section-header>
<h2 bitTypography="h6">{{ "domainsTitle" | i18n }}</h2>
<h2 bitTypography="h6">URLs</h2>
<span bitTypography="body2" slot="end">{{
viewTargetingRulesDomains.length + domainForms.value.length
}}</span>
@@ -29,21 +29,52 @@
<bit-item
*ngFor="let domain of viewTargetingRulesDomains; let i = index; trackBy: trackByFunction"
>
<bit-item-content *ngIf="i < fieldsEditThreshold">
<div id="uriTargetingRules{{ i }}">{{ domain }}</div>
<div
*ngIf="i < fieldsEditThreshold"
style="margin: 0.5rem 1rem; display: block; width: 90%"
>
<div
id="uriTargetingRules{{ i }}"
style="
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
line-clamp: 2;
display: -webkit-box;
max-height: 2rem;
overflow: hidden;
text-overflow: ellipsis;
white-space: normal;
word-break: break-all;
font-family: monospace;
font-size: 0.7rem;
"
title="{{ domain }}"
>
{{ domain }}
</div>
<div
*ngIf="targetingRulesDomainsViewState[domain].username"
title="{{ targetingRulesDomainsViewState[domain].username }}"
style="padding-left: 12px"
style="margin-left: 12px"
>
<div style="font-size: 0.8rem; font-weight: bold">Username:</div>
<div
style="
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
line-clamp: 3;
display: -webkit-box;
border-radius: 0.35rem;
background-color: rgb(var(--color-background-alt));
padding: 4px;
max-height: calc(2rem + 8px);
overflow: hidden;
text-overflow: ellipsis;
line-height: 0.75rem;
word-break: break-all;
font-family: monospace;
font-size: 0.7rem;
font-weight: lighter;
font-family: monospace;
text-overflow: ellipsis;
overflow-y: clip;
"
>
{{ targetingRulesDomainsViewState[domain].username }}
@@ -52,16 +83,26 @@
<div
*ngIf="targetingRulesDomainsViewState[domain].password"
title="{{ targetingRulesDomainsViewState[domain].password }}"
style="padding-left: 12px"
style="margin-left: 12px"
>
<div style="font-size: 0.8rem; font-weight: bold">Password:</div>
<div
style="
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
line-clamp: 3;
display: -webkit-box;
border-radius: 0.35rem;
background-color: rgb(var(--color-background-alt));
padding: 4px;
max-height: calc(2rem + 8px);
overflow: hidden;
text-overflow: ellipsis;
line-height: 0.75rem;
word-break: break-all;
font-family: monospace;
font-size: 0.7rem;
font-weight: lighter;
font-family: monospace;
text-overflow: ellipsis;
overflow-y: clip;
"
>
{{ targetingRulesDomainsViewState[domain].password }}
@@ -70,22 +111,32 @@
<div
*ngIf="targetingRulesDomainsViewState[domain].totp"
title="{{ targetingRulesDomainsViewState[domain].totp }}"
style="padding-left: 12px"
style="margin-left: 12px"
>
<div style="font-size: 0.8rem; font-weight: bold">TOTP:</div>
<div
style="
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
line-clamp: 3;
display: -webkit-box;
border-radius: 0.35rem;
background-color: rgb(var(--color-background-alt));
padding: 4px;
max-height: calc(2rem + 8px);
overflow: hidden;
text-overflow: ellipsis;
line-height: 0.75rem;
word-break: break-all;
font-family: monospace;
font-size: 0.7rem;
font-weight: lighter;
font-family: monospace;
text-overflow: ellipsis;
overflow-y: clip;
"
>
{{ targetingRulesDomainsViewState[domain].totp }}
</div>
</div>
</bit-item-content>
</div>
<button
*ngIf="i < fieldsEditThreshold && domain"
label="{{ 'remove' | i18n }}"
@@ -119,16 +170,31 @@
formControlName="domain"
/>
</bit-form-field>
<div style="display: flex; align-content: center; flex-wrap: wrap; row-gap: 3px">
<div style="color: rgb(var(--color-text-muted)); font-size: 0.875rem">Fields</div>
<div
style="
row-gap: 4px;
display: flex;
flex-wrap: wrap;
align-content: center;
border: 1px solid rgb(var(--color-text-muted));
border-radius: 0.5rem;
background-color: rgb(var(--color-background-alt));
padding: 7px;
text-align: end;
font-size: 0.9rem;
"
>
<!-- Username field -->
<div
class="field-row"
style="gap: 15px; display: flex; justify-content: flex-end; width: 100%"
>
<div style="gap: 5px; display: flex; justify-content: flex-end; width: 100%">
<label style="flex: 1 1 25%">Username: </label>
<input
style="
flex: 1 1 75%;
border-width: 1px;
border-style: solid;
border-radius: 0.25rem;
padding: 0 4px;
font-family: monospace;
font-size: 0.75rem;
font-weight: light;
@@ -141,17 +207,18 @@
</div>
<!-- Password field -->
<div
class="field-row"
style="gap: 15px; display: flex; justify-content: flex-end; width: 100%"
>
<div style="gap: 5px; display: flex; justify-content: flex-end; width: 100%">
<label style="flex: 1 1 25%">Password: </label>
<input
style="
flex: 1 1 75%;
border-width: 1px;
border-style: solid;
border-radius: 0.25rem;
padding: 0 4px;
font-family: monospace;
font-size: 0.75rem;
font-weight: light;
font-family: monospace;
"
appInputVerbatim
type="text"
@@ -161,17 +228,18 @@
</div>
<!-- TOTP field -->
<div
class="field-row"
style="gap: 15px; display: flex; justify-content: flex-end; width: 100%"
>
<div style="gap: 5px; display: flex; justify-content: flex-end; width: 100%">
<label style="flex: 1 1 25%">TOTP: </label>
<input
style="
flex: 1 1 75%;
border-width: 1px;
border-style: solid;
border-radius: 0.25rem;
padding: 0 4px;
font-family: monospace;
font-size: 0.75rem;
font-weight: light;
font-family: monospace;
"
appInputVerbatim
type="text"