feat: expand live chat and work server tools

src/widgets/text-memo-widget/TextMemoWidget.css

@@ -6,16 +6,24 @@
   width: 100%;
   height: 100%;
   min-height: 0;
+  overflow: hidden;
+}
+
+.layout-playground__pane--surface .text-memo-widget {
+  box-sizing: border-box;
+  height: calc(100% - 8px);
+  min-height: 0;
+  padding-bottom: 4px;
 }
 
 .text-memo-widget__body {
   display: flex;
-  flex: 1 1 auto;
+  flex: 1 1 0;
   flex-direction: column;
   gap: 12px;
   width: 100%;
-  height: 100%;
   min-height: 0;
+  overflow: hidden;
 }
 
 .text-memo-widget__body--list-open {
@@ -28,12 +36,16 @@
   justify-content: space-between;
   gap: 12px;
   padding: 2px 0 0;
+  min-width: 0;
+  flex-wrap: nowrap;
 }
 
 .text-memo-widget__toolbar-group {
   display: flex;
   align-items: center;
   gap: 4px;
+  min-width: 0;
+  flex-wrap: nowrap;
 }
 
 .text-memo-widget__toolbar .ant-btn {
@@ -52,7 +64,7 @@
 
 .text-memo-widget__editor {
   display: flex;
-  flex: 1 1 auto;
+  flex: 1 1 0;
   flex-direction: column;
   min-height: 0;
   position: relative;
@@ -77,16 +89,33 @@
   display: flex;
   align-items: center;
   justify-content: space-between;
+  gap: 12px;
   min-height: 28px;
   padding: 14px 18px 0;
   color: rgba(100, 116, 139, 0.92);
   font-size: 12px;
   letter-spacing: 0.01em;
+  flex-wrap: nowrap;
+}
+
+.text-memo-widget__meta > :first-child {
+  flex: 1 1 auto;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.text-memo-widget__meta > :last-child {
+  flex: 0 0 auto;
+  white-space: nowrap;
 }
 
 .text-memo-widget__editor .ant-input-textarea {
+  display: flex;
   flex: 1 1 auto;
   min-height: 0;
+  overflow: hidden;
 }
 
 .text-memo-widget__input.ant-input,
@@ -117,9 +146,8 @@
 
 .text-memo-widget__sheet {
   display: flex;
-  flex: 1 1 auto;
+  flex: 1 1 0;
   width: 100%;
-  height: 100%;
   min-height: 0;
   border-radius: 24px;
   border: 1px solid rgba(148, 163, 184, 0.18);
@@ -184,14 +212,16 @@
 
 @media (max-width: 640px) {
   .text-memo-widget__toolbar {
-    flex-wrap: wrap;
+    flex-direction: row;
+    align-items: center;
+    flex-wrap: nowrap;
   }
 
   .text-memo-widget__editor {
-    min-height: 300px;
+    min-height: min(300px, 100%);
   }
 
   .text-memo-widget__sheet {
-    min-height: 240px;
+    min-height: min(240px, 100%);
   }
 }