Shrunk-wrap the outline for row header focus visible.

buchananwill · Mar 28, 2024 · f56084e · f56084e
1 parent 5bca9b5
commit f56084e
Show file tree

Hide file tree

Showing 2 changed files with 4 additions and 4 deletions.
diff --git a/app/generic/components/tables/rating/rated-element-row-header.tsx b/app/generic/components/tables/rating/rated-element-row-header.tsx
@@ -6,7 +6,7 @@ import { useRatingEditModal } from '../../../hooks/use-rating-edit-modal';
 import { EmptyArray, isNotUndefined } from '../../../../api/main';
 import { useUnsavedListContext } from '../../../hooks/selective-context/use-unsaved-list-context';
 import { RatingStepper } from '../../buttons/rating-stepper';
-import { PencilSquareIcon } from '@heroicons/react/20/solid';
+import { ArrowRightIcon, PencilSquareIcon } from '@heroicons/react/20/solid';
 
 export function RatedElementRowHeader<R, E>({
   elementWithRating
@@ -59,14 +59,14 @@ export function RatedElementRowHeader<R, E>({
     <>
       <button
         className={
-          'btn rounded-none w-full h-full px-1 btn-xs text-left flex justify-between'
+          'btn rounded-none w-full h-full px-1 btn-xs text-left flex justify-between focus-visible:outline-offset-0 focus-visible:outline-1'
         }
         onClick={() =>
           triggerModal({ elementWithRating, rating: currentState[0] })
         }
       >
         {elementLabelAccessor(elementWithRating)}
-        <PencilSquareIcon className={'w-4 h-4 '}></PencilSquareIcon>
+        <ArrowRightIcon className={'w-4 h-4 '}></ArrowRightIcon>
       </button>
       <ConfirmActionModal
         show={show}

diff --git a/app/generic/components/tables/rating/rating-table-body.tsx b/app/generic/components/tables/rating/rating-table-body.tsx
@@ -10,7 +10,7 @@ export function RatingTableBody<R, E>({
   elementIdAccessor: AccessorFunction<E, string>;
 }) {
   return elementsWithRatings.map((ratedElement) => (
-    <tr key={elementIdAccessor(ratedElement)} className="">
+    <tr key={elementIdAccessor(ratedElement)} className="focus-within:z-10">
       <th
         className="text-sm px-2 sticky left-0 bg-opacity-100 z-10 bg-white"
         scope={'row'}