Use pixel (arbitrary) values instead of default `rounded` styles

Update component styles that use `rounded` without size qualification.
The intent here was for a border radius that was larger than the
standard border-radius pattern. Tailwind default for `rounded` is 4px,
so this worked, but this breaks down if we want to change the pattern
default border radius. Update these to be explicit about radius size so
that we may set a default `rounded `value, and, in future, adjust it
without breaking styling on these components.

src/annotator/components/AdderToolbar.tsx

@@ -19,7 +19,7 @@ function NumberIcon({ badgeCount }: { badgeCount: number }) {
   return (
     <span
       className={classnames(
-        'rounded px-1 py-0.5',
+        'rounded-[4px] px-1 py-0.5',
         // The background color is inherited from the current text color in
         // the containing button and will vary depending on hover state.
         'bg-current'
@@ -238,7 +238,7 @@ export default function AdderToolbar({
         // default border values from Tailwind and have to be explicit about all
         // border attributes.
         'border border-solid border-grey-3',
-        'absolute select-none bg-white rounded shadow-adder-toolbar',
+        'absolute select-none bg-white rounded-[4px] shadow-adder-toolbar',
         // Start at a very low opacity as we're going to fade in in the animation
         'opacity-5',
         {

src/annotator/components/ClusterToolbar.tsx

@@ -37,7 +37,7 @@ function ClusterStyleControl({
     <div className="space-y-2">
       <div className="flex items-center gap-x-2 text-annotator-base">
         <div
-          className="grow text-color-text px-2 py-1 rounded"
+          className="grow text-color-text px-2 py-1 rounded-[4px]"
           style={{
             backgroundColor: highlightStyles[appliedStyleName].color,
           }}

src/annotator/components/Toolbar.tsx

@@ -31,7 +31,7 @@ function ToolbarButton({ icon: Icon, ...buttonProps }: ToolbarButtonProps) {
   return (
     <Button
       classes={classnames(
-        'justify-center rounded-px',
+        'justify-center rounded-[4px]',
         'w-[30px] h-[30px]',
         'shadow border bg-white text-grey-6 hover:text-grey-9'
       )}

src/sidebar/components/MarkdownEditor.tsx

@@ -225,7 +225,7 @@ function Toolbar({ isPreviewing, onCommand, onTogglePreview }: ToolbarProps) {
       className={classnames(
         // Allow buttons to wrap to second line if necessary.
         'flex flex-wrap w-full items-center',
-        'p-1 border-x border-t rounded-t bg-white',
+        'p-1 border-x border-t rounded-t-[4px] bg-white',
         // For touch interfaces, allow height to scale to larger button targets.
         // Don't wrap buttons but instead scroll horizontally. Add bottom
         // padding to provide some space for scrollbar.

src/sidebar/components/ProfileView.tsx

@@ -39,7 +39,7 @@ function ToastBadge({
   return (
     <div
       className={classnames(
-        'flex items-center gap-x-1 py-1 px-2 rounded',
+        'flex items-center gap-x-1 py-1 px-2 rounded-[4px]',
         'bg-green-success/10 animate-pulse-fade-out',
         classes
       )}