bitwarden/browser
1
0
Fork 0
mirror of https://github.com/bitwarden/browser synced 2026-02-13 06:54:07 +00:00
Code Issues Releases Wiki Activity

[CL-445] Fix small sizing and spacing issues (#10962)

Browse Source
This commit is contained in:
Victoria League
2024-09-10 14:16:55 -04:00
committed by GitHub
parent 71f19398d1
commit b3ebe370d2
4 changed files with 10 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
apps/browser/src/platform/popup/layout/popup-footer.component.html
View File

@@ -1,5 +1,5 @@
<footer
class="tw-p-3 tw-border-0 tw-border-solid tw-border-t tw-border-secondary-300 tw-bg-background"
class="tw-p-4 tw-border-0 tw-border-solid tw-border-t tw-border-secondary-300 tw-bg-background"
>
<div class="tw-max-w-screen-sm tw-mx-auto tw-flex tw-justify-between tw-w-full">
<div class="tw-flex tw-justify-start tw-gap-2">

2
apps/browser/src/platform/popup/layout/popup-header.component.html
View File

@@ -1,5 +1,5 @@
<header
class="tw-p-4 tw-transition-colors tw-duration-200 tw-border-0 tw-border-b tw-border-solid"
class="tw-px-4 tw-py-3 tw-transition-colors tw-duration-200 tw-border-0 tw-border-b tw-border-solid"
[ngClass]="{
'tw-bg-background-alt tw-border-transparent':
this.background === 'alt' && !pageContentScrolled(),

6
libs/components/src/item/item.component.ts
View File

@@ -8,16 +8,16 @@ import { ItemActionComponent } from "./item-action.component";
/**
* The class used to set the height of a bit item's inner content.
*/
export const BitItemHeightClass = `tw-h-[60px]`;
export const BitItemHeightClass = `tw-h-[52px]`;
/**
* The height of a bit item in pixels. Includes any margin, padding, or border. Used by the virtual scroll
* to estimate how many items can be displayed at once and how large the virtual container should be.
* Needs to be updated if the item height or spacing changes.
*
* 60px + 6px bottom margin + 1px border = 67px
* 52px + 6px bottom margin + 1px border = 59px
*/
export const BitItemHeight = 67; //
export const BitItemHeight = 59;
@Component({
selector: "bit-item",

8
libs/components/src/item/item.stories.ts
View File

@@ -16,7 +16,7 @@ import { I18nMockService } from "../utils/i18n-mock.service";
import { ItemActionComponent } from "./item-action.component";
import { ItemContentComponent } from "./item-content.component";
import { ItemGroupComponent } from "./item-group.component";
import { ItemComponent } from "./item.component";
import { ItemComponent, BitItemHeight, BitItemHeightClass } from "./item.component";
export default {
title: "Component Library/Item",
@@ -326,12 +326,14 @@ export const VirtualScrolling: Story = {
render: (_args) => ({
props: {
data: Array.from(Array(100000).keys()),
itemSize: BitItemHeight,
itemClass: BitItemHeightClass,
},
template: /*html*/ `
<cdk-virtual-scroll-viewport [itemSize]="46" class="tw-h-[500px]">
<cdk-virtual-scroll-viewport [itemSize]="itemSize" class="tw-h-[500px]">
<bit-item-group aria-label="Single Action List">
<bit-item *cdkVirtualFor="let item of data">
<button bit-item-content>
<button bit-item-content [ngClass]="itemClass">
<i slot="start" class="bwi bwi-globe tw-text-2xl tw-text-muted" aria-hidden="true"></i>
{{ item }}
</button>