nowarp for explore item title

src/components/editor.tsx

@@ -1185,8 +1185,8 @@ export const Editor: FC<EditorProps> = ({ onUpdate: updateState, data: editor, .
                       type="text"
                       size="small"
                       className={mergeClassNames(
-                        "b3-editor-button-filter",
-                        filterOption.filterCase && "b3-editor-button-filter-selected"
+                        "b3-editor-filter",
+                        filterOption.filterCase && "b3-editor-filter-selected"
                       )}
                       icon={<VscCaseSensitive style={{ width: "18px", height: "18px" }} />}
                       onClick={() =>
@@ -1201,8 +1201,8 @@ export const Editor: FC<EditorProps> = ({ onUpdate: updateState, data: editor, .
                     type="text"
                     size="small"
                     className={mergeClassNames(
-                      "b3-editor-button-filter",
-                      filterOption.filterFocus && "b3-editor-button-filter-selected"
+                      "b3-editor-filter",
+                      filterOption.filterFocus && "b3-editor-filter-selected"
                     )}
                     icon={<RiFocus3Line />}
                     onClick={() =>

src/components/explorer.tsx

@@ -804,7 +804,19 @@ export const Explorer: FC = () => {
                     </div>
                   );
                 } else {
-                  return <span key={node.path}>{node.title}</span>;
+                  return (
+                    <div style={{ flex: 1, width: 0, minWidth: 0 }}>
+                      <div
+                        style={{
+                          whiteSpace: "nowrap",
+                          overflow: "hidden",
+                          textOverflow: "ellipsis",
+                        }}
+                      >
+                        {node.title}
+                      </div>
+                    </div>
+                  );
                 }
               }}
               allowDrop={(options) => {
@@ -826,6 +838,19 @@ export const Explorer: FC = () => {
           fieldNames={{ key: "title" }}
           treeData={nodeTree ? [nodeTree] : []}
           draggable={{ icon: false, nodeDraggable: (node) => !!node.isLeaf }}
+          titleRender={(node) => (
+            <div style={{ flex: 1, width: 0, minWidth: 0 }}>
+              <div
+                style={{
+                  whiteSpace: "nowrap",
+                  overflow: "hidden",
+                  textOverflow: "ellipsis",
+                }}
+              >
+                {node.title}
+              </div>
+            </div>
+          )}
           onSelect={(_, info) => {
             const node = info.node;
             if (node && node.isLeaf) {

src/index.scss

@@ -86,8 +86,13 @@ body {
   cursor: pointer !important;
 }
 
-.ant-tree .ant-tree-node-content-wrapper {
+.ant-tree-node-content-wrapper {
   padding-left: 0 !important;
+  display: inline-flex;
+}
+
+.ant-tree-title {
+  display: contents;
 }
 
 .ant-tree-switcher.ant-tree-switcher-noop,
@@ -179,11 +184,11 @@ body {
 }
 
 // editor
-.b3-editor-button-filter {
+.b3-editor-filter {
   width: 20px !important;
   height: 20px !important;
 }
 
-.b3-editor-button-filter-selected {
+.b3-editor-filter-selected {
   background-color: var(--b3-color-selected) !important;
 }