Fix dropdown active item outline clipped by adjacent items (#32073)

* Initial plan

* Fix selected item outline overlapping next item in dropdown menus

Replace position:relative + absolute positioning with flexbox layout
on .dropdown-item to prevent stacking context overlap of active outline.

Co-authored-by: aeaton-overleaf <75253002+aeaton-overleaf@users.noreply.github.com>

* Fix invalid HTML - replace `div` with `span` inside dropdown item description container

* Do not suppress keyboard focus outlines in toolbar dropdown menus

* Add explicit keyboard focus ring for dropdown items

* Avoid overlapping link focus rings with inset box-shadow

---------

Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com>
Co-authored-by: aeaton-overleaf <75253002+aeaton-overleaf@users.noreply.github.com>
Co-authored-by: Rebeka <o.dekany@gmail.com>
GitOrigin-RevId: ce4d1b01f04476fd154b6c05a52fc5632bf8b8dc

services/web/frontend/js/shared/components/dropdown/dropdown-menu.tsx

@@ -83,17 +83,15 @@ function DropdownItem(
       ref={ref}
     >
       {leadingIconComponent}
-      <div
-        className={classnames({
-          'dropdown-item-description-container': description,
-        })}
-      >
-        {children}
-        {trailingIconComponent}
-        {description && (
+      {description ? (
+        <span className="dropdown-item-description-container">
+          {children}
           <span className="dropdown-item-description">{description}</span>
-        )}
-      </div>
+        </span>
+      ) : (
+        children
+      )}
+      {trailingIconComponent}
     </BS5DropdownItem>
   )
 }