From eb1fd5f7ed6da75adc048b7441985d9915aa732c Mon Sep 17 00:00:00 2001
From: Ben Brooks <bbrooks@bitwarden.com>
Date: Thu, 26 Jun 2025 12:53:36 -0700
Subject: [PATCH] fix(style): [CL-601] Improve CSS per reviewer comments

Signed-off-by: Ben Brooks <bbrooks@bitwarden.com>
---
 .../src/search/search.component.html          | 84 +++++++++----------
 1 file changed, 41 insertions(+), 43 deletions(-)

diff --git a/libs/components/src/search/search.component.html b/libs/components/src/search/search.component.html
index b3b92e0ed18..8ade3530d7f 100644
--- a/libs/components/src/search/search.component.html
+++ b/libs/components/src/search/search.component.html
@@ -1,44 +1,42 @@
-<div class="tw-relative tw-flex tw-items-center">
-  <form
-    role="search"
-    (mouseenter)="isFormHovered.set(true)"
-    (mouseleave)="isFormHovered.set(false)"
-    class="tw-relative tw-flex tw-items-center tw-w-full"
+<form
+  role="search"
+  (mouseenter)="isFormHovered.set(true)"
+  (mouseleave)="isFormHovered.set(false)"
+  class="tw-relative tw-flex tw-items-center tw-w-full"
+>
+  <label class="tw-sr-only" [for]="id">{{ "search" | i18n }}</label>
+  <label
+    [for]="id"
+    aria-hidden="true"
+    class="tw-absolute tw-start-2 tw-z-20 !tw-mb-0 tw-cursor-text"
   >
-    <label class="tw-sr-only" [for]="id">{{ "search" | i18n }}</label>
-    <label
-      [for]="id"
-      aria-hidden="true"
-      class="tw-absolute tw-left-2 tw-z-20 !tw-mb-0 tw-cursor-text"
-    >
-      <i class="bwi bwi-search bwi-fw tw-text-muted"></i>
-    </label>
-    <input
-      #input
-      bitInput
-      [type]="inputType"
-      [id]="id"
-      [placeholder]="placeholder ?? ('search' | i18n)"
-      class="tw-pl-9"
-      [ngModel]="searchText"
-      (ngModelChange)="onChange($event)"
-      [ngModelOptions]="{ standalone: true }"
-      (focus)="isInputFocused.set(true)"
-      (blur)="isInputFocused.set(false); onTouch()"
-      [disabled]="disabled"
-      [attr.autocomplete]="autocomplete"
-    />
-    <button
-      *ngIf="searchText && showResetButton()"
-      [ngClass]="{
-        'tw-opacity-0': !showResetButton(),
-        'tw-bg-text-muted': showResetButton(),
-      }"
-      class="bw-reset-btn tw-size-6 tw-absolute hover:tw-bg-text-main tw-right-2 tw-z-20 !tw-mb-0 tw-cursor-pointer"
-      type="reset"
-      [attr.aria-label]="searchText ? ('Reset search' | i18n) : ''"
-      [attr.aria-hidden]="!searchText"
-      (click)="clearSearch()"
-    ></button>
-  </form>
-</div>
+    <i class="bwi bwi-search bwi-fw tw-text-muted"></i>
+  </label>
+  <input
+    #input
+    bitInput
+    [type]="inputType"
+    [id]="id"
+    [placeholder]="placeholder ?? ('search' | i18n)"
+    class="tw-ps-9"
+    [ngModel]="searchText"
+    (ngModelChange)="onChange($event)"
+    [ngModelOptions]="{ standalone: true }"
+    (focus)="isInputFocused.set(true)"
+    (blur)="isInputFocused.set(false); onTouch()"
+    [disabled]="disabled"
+    [attr.autocomplete]="autocomplete"
+  />
+  <button
+    *ngIf="searchText && showResetButton()"
+    [ngClass]="{
+      'tw-opacity-0': !showResetButton(),
+      'tw-bg-text-muted': showResetButton(),
+    }"
+    class="bw-reset-btn tw-size-6 tw-absolute hover:tw-bg-text-main tw-end-2 tw-z-20 !tw-mb-0 tw-cursor-pointer"
+    type="reset"
+    [attr.aria-label]="searchText ? ('Reset search' | i18n) : ''"
+    [attr.aria-hidden]="!searchText"
+    (click)="clearSearch()"
+  ></button>
+</form>