chore(editor): revert padding and layout of code block toolbar (#9562)

Close [BS-1767](https://linear.app/affine-design/issue/BS-1767/code-block调整边距)

This PR reverts padding and layout of code block toolbar.

![CleanShot 2025-01-07 at 12.39.37@2x.png](https://graphite-user-uploaded-assets-prod.s3.amazonaws.com/MyRfgiN4RuBxJfrza3SG/7f278d03-40c4-4592-a844-77a5179149fd.png)

blocksuite/affine/block-code/src/code-block.ts

@@ -16,7 +16,7 @@ import {
   getInlineRangeProvider,
   TextSelection,
 } from '@blocksuite/block-std';
-import { IS_MAC } from '@blocksuite/global/env';
+import { IS_MAC, IS_MOBILE } from '@blocksuite/global/env';
 import { noop } from '@blocksuite/global/utils';
 import {
   INLINE_ROOT_ATTR,
@@ -389,6 +389,7 @@ export class CodeBlockComponent extends CaptionedBlockComponent<
       <div
         class=${classMap({
           'affine-code-block-container': true,
+          mobile: IS_MOBILE,
           wrap: this.model.wrap,
         })}
       >

blocksuite/affine/block-code/src/code-toolbar/components/code-toolbar.ts

@@ -17,15 +17,19 @@ export class AffineCodeToolbar extends WithDisposable(LitElement) {
   static override styles = css`
     :host {
       position: absolute;
+      width: 100%;
       top: 0;
-      right: 0;
+      left: 0;
     }
 
     .code-toolbar-container {
+      width: auto;
       height: 24px;
       gap: 4px;
       padding: 4px;
       margin: 0;
+      display: flex;
+      justify-content: flex-end;
     }
 
     .code-toolbar-button {

blocksuite/affine/block-code/src/code-toolbar/components/lang-button.ts

@@ -17,6 +17,10 @@ export class LanguageListButton extends WithDisposable(
   SignalWatcher(LitElement)
 ) {
   static override styles = css`
+    :host {
+      margin-right: auto;
+    }
+
     .lang-button {
       background-color: var(--affine-background-primary-color);
       box-shadow: var(--affine-shadow-1);

blocksuite/affine/block-code/src/code-toolbar/index.ts

@@ -14,7 +14,7 @@ import {
   TextSelection,
   WidgetComponent,
 } from '@blocksuite/block-std';
-import { limitShift, shift } from '@floating-ui/dom';
+import { limitShift, shift, size } from '@floating-ui/dom';
 import { html } from 'lit';
 
 import type { CodeBlockComponent } from '../code-block.js';
@@ -82,8 +82,13 @@ export class AffineCodeToolbarWidget extends WidgetComponent<
           },
           computePosition: {
             referenceElement: codeBlock,
-            placement: 'right-start',
+            placement: 'top',
             middleware: [
+              size({
+                apply({ rects, elements }) {
+                  elements.floating.style.width = `${rects.reference.width}px`;
+                },
+              }),
               shift({
                 crossAxis: true,
                 padding: {

blocksuite/affine/block-code/src/styles.ts

@@ -9,12 +9,16 @@ export const codeBlockStyles = css`
     font-size: var(--affine-font-xs);
     line-height: var(--affine-line-height);
     position: relative;
-    padding: 12px;
+    padding: 28px 24px;
     background: var(--affine-background-code-block);
     border-radius: 10px;
     box-sizing: border-box;
   }
 
+  .affine-code-block-container.mobile {
+    padding: 12px;
+  }
+
   .affine-code-block-container .inline-editor {
     font-family: var(--affine-font-code-family);
     font-variant-ligatures: none;