@aleph-alpha/chat-kit 6.1.0 → 6.1.1

package/dist/chat-kit.css

@@ -1134,13 +1134,31 @@ html.dark .ck-milkdown {
   margin: 0.5rem 0; /* = pre: 'my-2' */
   padding: 0;
   max-width: 100%;
-  overflow: hidden;
+  /* NOT `overflow: hidden`, unlike UiCodeBlock. The language picker is a
+   * position:absolute panel *inside* this block (Crepe renders it inline, not
+   * through a portal) and its list is 410px tall, so clipping here would cut
+   * it down to the height of the code block. The rounded corners are clipped
+   * on the two inner sections instead. */
+  overflow: visible;
   border: 1px solid oklch(var(--border-surface-default));
   border-radius: 0.5rem;
   background: var(--ck-cm-bg);
   color: var(--ck-cm-foreground);
 }
 
+/* Corner rounding that `overflow: hidden` on the wrapper used to provide.
+ * `calc(0.5rem - 1px)` nests inside the wrapper's 1px border cleanly. */
+.ck-milkdown .milkdown .milkdown-code-block .tools {
+  border-top-left-radius: calc(0.5rem - 1px);
+  border-top-right-radius: calc(0.5rem - 1px);
+}
+
+.ck-milkdown .milkdown .milkdown-code-block .codemirror-host {
+  overflow: hidden;
+  border-bottom-left-radius: calc(0.5rem - 1px);
+  border-bottom-right-radius: calc(0.5rem - 1px);
+}
+
 .ck-milkdown .milkdown .milkdown-code-block.selected {
   outline: 2px solid oklch(var(--border-surface-focus-ring));
   outline-offset: 1px;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aleph-alpha/chat-kit",
-  "version": "6.1.0",
+  "version": "6.1.1",
   "description": "Chat kit package for building chat interfaces with Vue",
   "type": "module",
   "main": "./dist/index.js",
@@ -114,8 +114,8 @@
     "vue-tsc": "^3.2.4",
     "wait-on": "9.0.3",
     "@aleph-alpha/eslint-config-frontend": "0.7.1",
-    "@aleph-alpha/prettier-config-frontend": "2.1.1",
-    "@aleph-alpha/tsconfig-frontend": "0.7.3"
+    "@aleph-alpha/tsconfig-frontend": "0.7.3",
+    "@aleph-alpha/prettier-config-frontend": "2.1.1"
   },
   "scripts": {
     "build": "vite build && vue-tsc --project tsconfig.build.json --declaration --emitDeclarationOnly --outDir dist",

package/src/components/base/CkMilkdownEditor/milkdown-theme.css

@@ -244,13 +244,31 @@ html.dark .ck-milkdown {
   margin: 0.5rem 0; /* = pre: 'my-2' */
   padding: 0;
   max-width: 100%;
-  overflow: hidden;
+  /* NOT `overflow: hidden`, unlike UiCodeBlock. The language picker is a
+   * position:absolute panel *inside* this block (Crepe renders it inline, not
+   * through a portal) and its list is 410px tall, so clipping here would cut
+   * it down to the height of the code block. The rounded corners are clipped
+   * on the two inner sections instead. */
+  overflow: visible;
   border: 1px solid oklch(var(--border-surface-default));
   border-radius: 0.5rem;
   background: var(--ck-cm-bg);
   color: var(--ck-cm-foreground);
 }
 
+/* Corner rounding that `overflow: hidden` on the wrapper used to provide.
+ * `calc(0.5rem - 1px)` nests inside the wrapper's 1px border cleanly. */
+.ck-milkdown .milkdown .milkdown-code-block .tools {
+  border-top-left-radius: calc(0.5rem - 1px);
+  border-top-right-radius: calc(0.5rem - 1px);
+}
+
+.ck-milkdown .milkdown .milkdown-code-block .codemirror-host {
+  overflow: hidden;
+  border-bottom-left-radius: calc(0.5rem - 1px);
+  border-bottom-right-radius: calc(0.5rem - 1px);
+}
+
 .ck-milkdown .milkdown .milkdown-code-block.selected {
   outline: 2px solid oklch(var(--border-surface-focus-ring));
   outline-offset: 1px;