docs: fix playground style and enhance user experience (#277)

Author: tabzzz1

.dumi/theme/builtins/Previewer/CodePreviewer.tsx

@@ -390,11 +390,13 @@ createRoot(document.getElementById('container')).render(<Demo />);
       {!simplify && (
         <section className="code-box-meta markdown">
           <div className="code-box-title">
-            <Tooltip title={originDebug ? <FormattedMessage id="app.demo.debug" /> : ''}>
-              <a href={`#${asset.id}`} ref={anchorRef}>
-                {localizedTitle}
-              </a>
-            </Tooltip>
+            {localizedTitle && (
+              <Tooltip title={originDebug ? <FormattedMessage id="app.demo.debug" /> : ''}>
+                <a href={`#${asset.id}`} ref={anchorRef}>
+                  {localizedTitle}
+                </a>
+              </Tooltip>
+            )}
             <EditButton
               title={<FormattedMessage id="app.content.edit-demo" />}
               filename={filename}

.dumi/theme/common/EditButton.tsx

@@ -21,6 +21,8 @@ const useStyle = createStyles(({ token, css }) => {
         display: inline-block;
         text-decoration: none;
         vertical-align: middle;
+        pointer-events: auto;
+        z-index: 999;
         margin-inline-start: ${token.marginXS}px;
         ${iconCls} {
           display: block;

.dumi/theme/common/styles/Demo.tsx

@@ -1,6 +1,6 @@
-import React from 'react';
-import { css, Global } from '@emotion/react';
+import { Global, css } from '@emotion/react';
 import { useTheme } from 'antd-style';
+import React from 'react';
 
 const GlobalDemoStyles: React.FC = () => {
   const token = useTheme();
@@ -74,6 +74,7 @@ const GlobalDemoStyles: React.FC = () => {
           &-title {
             position: absolute;
             top: -14px;
+            height: auto;
             padding: 1px 8px;
             color: #777;
             background: ${token.colorBgContainer};
@@ -291,8 +292,8 @@ const GlobalDemoStyles: React.FC = () => {
           }
 
           &-codesandbox {
-            width: 16px;
-            height: 16px;
+            width: 14px;
+            height: 14px;
             overflow: hidden;
             border: 0;
             cursor: pointer;