fix(cubejs-playground): Long line ellipsis (#761)

Author: vasilev-alex

packages/cubejs-playground/src/components/Order/DraggableItem.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Button } from 'antd';
+import { Button, Typography } from 'antd';
 import { Draggable } from 'react-beautiful-dnd';
 import { DragOutlined } from '@ant-design/icons';
 
@@ -19,18 +19,27 @@ export default function DraggableItem({ id, index, order = 'none', children, onO
           {...draggableProps}
           {...dragHandleProps}
           style={{
+            display: 'flex',
+            flexWrap: 'nowrap',
+            justifyContent: 'space-between',
+            alignItems: 'center',
             marginBottom: 8,
-            ...draggableProps.style
+            ...draggableProps.style,
           }}
-        >
-          <DragOutlined style={{ marginRight: 8 }} />
-
-          <span>{children}</span>
+          >
+          <DragOutlined />
+          
+          <Typography.Text ellipsis style={{ margin: '0 auto 0 8px' }}>
+            {children}
+          </Typography.Text>
 
           <Button
             type={order !== 'none' ? 'primary' : null}
             size="small"
-            style={{ width: 80, float: 'right' }}
+            style={{
+              minWidth: 70,
+              marginLeft: 8,
+            }}
             onClick={() => onOrderChange(id, getNextOrder())}
           >
             {order.toUpperCase()}

packages/cubejs-playground/src/components/Pivot/Item.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import { Draggable } from 'react-beautiful-dnd';
 import { DragOutlined } from '@ant-design/icons';
+import { Typography } from 'antd';
 
 export default function Item({ id, index }) {
   return (
@@ -14,9 +15,10 @@ export default function Item({ id, index }) {
             ...draggableProps.style,
           }}
         >
-          <DragOutlined style={{ marginRight: 8 }} />
-
-          <span>{id}</span>
+          <Typography.Text ellipsis style={{ maxWidth: '100%' }}>
+            <DragOutlined style={{ marginRight: 8 }} />
+            {id}
+          </Typography.Text>
         </div>
       )}
     </Draggable>

packages/cubejs-server-core/dev/templates/packages/react-antd-dynamic/scaffolding/src/components/QueryBuilder/Order/DraggableItem.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Button } from 'antd';
+import { Button, Typography } from 'antd';
 import { Draggable } from 'react-beautiful-dnd';
 import { DragOutlined } from '@ant-design/icons';
 
@@ -19,18 +19,27 @@ export default function DraggableItem({ id, index, order = 'none', children, onO
           {...draggableProps}
           {...dragHandleProps}
           style={{
+            display: 'flex',
+            flexWrap: 'nowrap',
+            justifyContent: 'space-between',
+            alignItems: 'center',
             marginBottom: 8,
-            ...draggableProps.style
+            ...draggableProps.style,
           }}
-        >
-          <DragOutlined style={{ marginRight: 8 }} />
-
-          <span>{children}</span>
+          >
+          <DragOutlined />
+          
+          <Typography.Text ellipsis style={{ margin: '0 auto 0 8px' }}>
+            {children}
+          </Typography.Text>
 
           <Button
             type={order !== 'none' ? 'primary' : null}
             size="small"
-            style={{ width: 80, float: 'right' }}
+            style={{
+              minWidth: 70,
+              marginLeft: 8,
+            }}
             onClick={() => onOrderChange(id, getNextOrder())}
           >
             {order.toUpperCase()}

packages/cubejs-server-core/dev/templates/packages/react-antd-dynamic/scaffolding/src/components/QueryBuilder/Pivot/Item.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import { Draggable } from 'react-beautiful-dnd';
 import { DragOutlined } from '@ant-design/icons';
+import { Typography } from 'antd';
 
 export default function Item({ id, index }) {
   return (
@@ -14,9 +15,10 @@ export default function Item({ id, index }) {
             ...draggableProps.style,
           }}
         >
-          <DragOutlined style={{ marginRight: 8 }} />
-
-          <span>{id}</span>
+          <Typography.Text ellipsis style={{ maxWidth: '100%' }}>
+            <DragOutlined style={{ marginRight: 8 }} />
+            {id}
+          </Typography.Text>
         </div>
       )}
     </Draggable>