button overflow

Author: czwe-01

shesha-reactjs/src/components/mainLayout/styles/indexStyles.ts

@@ -147,7 +147,6 @@ export const GlobalSheshaStyles = createGlobalStyle`
     .sha-toolbar-btn-configurable {
           display: flex;
           align-items: center;
-            max-width: 100%;
             span {
                 max-width: 100%;
                 overflow: hidden;

shesha-reactjs/src/components/mainLayout/styles/styles.ts

@@ -156,7 +156,7 @@ export const useStyles = createStyles(({ css, cx, responsive, token, prefixCls }
 
     .${prefixCls}-layout-sider-children {
       width: ${shaSiderExpandedWidth}  !important;
-
+z
       .logo {
         margin-top: ${layoutTriggerHeight}  !important; // It should use a config
       }

shesha-reactjs/src/designer-components/button/configurableButton/index.tsx

@@ -8,6 +8,7 @@ import { useConfigurableActionDispatcher } from '@/providers/configurableActions
 import { useAvailableConstantsData } from '@/providers/form/utils';
 import { isNavigationActionConfiguration, useShaRouting, useTheme } from '@/index';
 import { useAsyncMemo } from '@/hooks/useAsyncMemo';
+import { useStyles } from './style';
 export interface IConfigurableButtonProps extends Omit<IButtonItem, 'style' | 'itemSubType'> {
   style?: CSSProperties;
   form: FormInstance<any>;
@@ -22,6 +23,7 @@ export const ConfigurableButton: FC<IConfigurableButtonProps> = props => {
   const dynamicContext = useActionDynamicContext(actionConfiguration);
 
   const { theme } = useTheme();
+  const { styles } = useStyles();
   const [loading, setLoading] = useState(false);
   const [isModal, setModal] = useState(false);
 
@@ -73,7 +75,7 @@ export const ConfigurableButton: FC<IConfigurableButtonProps> = props => {
       danger={props.danger}
       icon={props.icon ? <ShaIcon iconName={props.icon as IconType} /> : undefined}
       iconPosition={props.iconPosition}
-      className={classNames('sha-toolbar-btn sha-toolbar-btn-configurable')}
+      className={classNames('sha-toolbar-btn sha-toolbar-btn-configurable', styles.configurableButton)}
       size={props?.size}
       disabled={buttonDisabled}
       style={{ ...props?.style, ...(isSameUrl && { background: theme.application.primaryColor, color: theme.text.default }) }}

shesha-reactjs/src/designer-components/button/configurableButton/style.ts

@@ -0,0 +1,21 @@
+import { createStyles } from "@/styles";
+
+export const useStyles = createStyles(({ css, cx }) => {
+    const configurableButton = cx("flex-container", css`
+        .sha-toolbar-btn-configurable {
+          display: flex;
+          align-items: center;
+            max-width: 100%;
+            span {
+                max-width: 100%;
+                overflow: hidden;
+                text-overflow: ellipsis;
+                white-space: nowrap;
+        }
+       
+    }
+    `);
+    return {
+        configurableButton,
+    };
+});

shesha-reactjs/src/designer-components/button/util.ts

@@ -44,8 +44,7 @@ export const defaultStyles = (prev): IStyleType => {
             blurRadius: 0,
             spreadRadius: 0,
         },
-        // stylingBox: '{"paddingLeft":"15","paddingBottom":"4","paddingTop":"4","paddingRight":"15"}',
-        dimensions: { width: prev.block ? '100%' : 'auto', height: '32px', minHeight: '0px', maxHeight: 'auto', minWidth: '0px', maxWidth: 'auto' }
+        dimensions: { width: prev.block ? '100%' : 'auto', height: '32px', minHeight: '0px', maxHeight: 'auto', minWidth: '0px', maxWidth: '100%' }
     };
 };
 

shesha-reactjs/src/designer-components/propertiesTabs/style.ts

@@ -8,14 +8,26 @@ export const useStyles = createStyles(({ css, cx, }) => {
         `);
 
     const content = cx(css`
-
             .ant-tabs-tab, .ant-tabs-nav-operations {
                 height: 24px;
             }
 
             .ant-tabs-tab {
                 --ant-tabs-card-padding-sm: 0 8px;
             }
+
+            .sha-toolbar-btn-configurable, .ant-btn {
+                display: flex;
+                align-items: center;
+                max-width: 100%;
+                span {
+                    max-width: 100%;
+                    overflow: hidden;
+                    text-overflow: ellipsis;
+                    white-space: nowrap;
+                }
+
+        }
         `);
 
     return {