fix(ui): restore highlight options layout and clean up color name editing (#3776)

* fix(ui): restore highlight options layout and clean up color name editing

Restore the pre-#3741 layout for both the AnnotationPopup highlight
options row and the HighlightColorsEditor settings panel.

HighlightOptions: re-add `justify-between` on the outer container and
remove `flex-1` from the color strip so the gap between the style box
and color strip responds to the number of colors.

HighlightColorsEditor: restore `grid-cols-3 sm:grid-cols-5` grid,
remove always-visible name inputs, and add a click-to-edit popover on
each color circle with hover tooltip for the label.

Add a browser screenshot test that renders the real AnnotationPopup
component with Tailwind CSS and compares against baseline PNGs for
5, 10, and 15 colors.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

apps/readest-app/src/app/reader/components/annotator/HighlightOptions.tsx

@@ -173,7 +173,7 @@ const HighlightOptions: React.FC<HighlightOptionsProps> = ({
   return (
     <div
       className={clsx(
-        'highlight-options absolute flex items-center gap-4',
+        'highlight-options absolute flex items-center justify-between gap-4',
         isVertical ? 'flex-col' : 'flex-row',
       )}
       style={{
@@ -249,9 +249,7 @@ const HighlightOptions: React.FC<HighlightOptionsProps> = ({
         {...stripPointerHandlers}
         className={clsx(
           'not-eink:bg-gray-700 eink-bordered flex items-center gap-2 rounded-3xl',
-          isVertical
-            ? 'flex-col overflow-y-auto py-2'
-            : 'min-w-0 flex-1 flex-row overflow-x-auto px-2',
+          isVertical ? 'flex-col overflow-y-auto py-2' : 'min-w-0 flex-row overflow-x-auto px-2',
           !isVertical && 'cursor-grab',
           !isVertical && isDraggingColorStrip && 'cursor-grabbing',
         )}