the dock rounds its tiles; now it clips them too

reported as a plugin whose dock tile had square corners while every other one was
rounded, and the expectation was right: the rounding IS dock infrastructure and
has been there all along. it was simply never reaching the artwork.

the box is `rounded-xl` and the image inside it is not clipped. a `badge` tile
insets its glyph to h-7, so the corners are empty and nothing looked wrong for as
long as every plugin used one. `bare` fills the box edge to edge — so the first
plugin to ship a logo on an OPAQUE background drew its own square corners over a
rounded box, and became the one tile in the row that had not been told the shape.

`overflow-hidden`, in the dock and in spotlight, which had the identical bug a few
pixels away. it fixes every bare plugin rather than this one, and it is a no-op for
badge tiles, which is why it belongs on the box and not on the image.

the plugins list drew the same artwork with no rounding at all while the grid
beside it used `rounded-xl`. rounded to match.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Officer-Session: 656f5c85-e49a-4f1f-b9f3-042a04b4d043

src/apps/officer-web/Screens/Dashboard/Layout/Dock.tsx

@@ -109,10 +109,16 @@ export const Dock = ({ items, className, boundaryRef }: DockProps) => {
                   {item.label}
                 </span>
                 <div
-                  className="w-10 h-10 md:w-12 md:h-12 rounded-xl flex items-center justify-center transition-all"
+                  className="w-10 h-10 md:w-12 md:h-12 rounded-xl overflow-hidden flex items-center justify-center transition-all"
                   style={{
                     // `bare` keeps the box — it is what sizes the row and carries the glow — and simply
                     // does not paint it.
+                    //
+                    // `overflow-hidden` is what makes the ROUNDING apply to artwork. A `badge` tile insets
+                    // its glyph, so the corners were never reached and nothing here looked wrong for as
+                    // long as every plugin used one. `bare` fills the box edge to edge, so a logo on an
+                    // opaque background kept its own square corners and sat in the dock as the one tile
+                    // that had not been told the shape.
                     background: item.tile === 'bare' ? 'transparent' : item.color,
                     boxShadow: isActive ? `0 0 12px ${item.color}40` : 'none',
                   }}

src/apps/officer-web/Screens/Dashboard/Layout/Spotlight/Spotlight.tsx

@@ -143,7 +143,10 @@ const Row = ({
         it put a coloured pane behind Calendar, Contacts and every plugin logo.
       */}
       <span
-        className="flex h-9 w-9 shrink-0 items-center justify-center rounded-md"
+        // `overflow-hidden` for the same reason as the dock: `bare` artwork fills the box, so without it
+        // the rounding is drawn and then painted over. The two have to agree — the same plugin appears in
+        // both, a few pixels apart.
+        className="flex h-9 w-9 shrink-0 items-center justify-center overflow-hidden rounded-md"
         style={{
           background: item.tile === 'bare' ? 'transparent' : (item.color ?? 'transparent'),
           // No colour at all is a settings row: keep the muted glyph rather than inventing a swatch.

src/workspaces/officerdev/src/apps/Plugins/PluginDetail.tsx

@@ -177,7 +177,7 @@ const ActionLog = ({
 
 /** Artwork if the catalogue has a URL, else the plugin's own lucide glyph. */
 const AvailableGlyph = ({ plugin }: { plugin: AvailablePlugin }) => {
-  if (plugin.image) return <img src={plugin.image} alt="" className="h-10 w-10 shrink-0 object-contain" />;
+  if (plugin.image) return <img src={plugin.image} alt="" className="h-10 w-10 shrink-0 rounded-xl object-contain" />;
   const Glyph = resolveIcon(plugin.icon ?? 'Box');
   return <Glyph className="h-9 w-9 shrink-0" style={{ color: plugin.color }} />;
 };
@@ -431,7 +431,9 @@ export const PluginDetail = () => {
   return (
     <div className="h-full overflow-auto p-6">
       <div className="flex items-center gap-3">
-        {plugin.image ? <img src={plugin.image} alt="" className="h-10 w-10 shrink-0 object-contain" /> : null}
+        {plugin.image ? (
+          <img src={plugin.image} alt="" className="h-10 w-10 shrink-0 rounded-xl object-contain" />
+        ) : null}
         <div className="min-w-0">
           <h2 className="text-lg font-semibold text-duck-dark">{plugin.label}</h2>
           <p className="mt-0.5 text-sm text-duck-dark/60">{plugin.summary}</p>