Skip to content

Thulasizwe/fix/3558 #4161

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
IvanIlyichev merged 15 commits into from
Nov 18, 2025
Merged

Thulasizwe/fix/3558 #4161

Show file tree
Hide file tree
Changes from 9 commits
Commits
Show all changes
15 commits
Select commit Hold shift + click to select a range
71a2296
Merge branch 'main' into thulasizwe/fix/3558
czwe-01 Nov 10, 2025
6567241
fix: adjust component properties panel padding, enhance sidebar and c…
czwe-01 Nov 10, 2025
65a621e
Merge branch 'main' into thulasizwe/fix/3558
czwe-01 Nov 10, 2025
16e15e4
fix: change sidebar overflow from scroll to auto for improved respons…
czwe-01 Nov 10, 2025
f08325c
refactor: clean up styles and improve layout in form designer and sid…
czwe-01 Nov 11, 2025
9d348da
Merge branch 'thulasizwe/fix/3558' of https://github.com/czwe-01/shes…
czwe-01 Nov 11, 2025
19d72fa
refactor: remove unused styles and improve form designer layout
czwe-01 Nov 17, 2025
d653071
style: enhance scrollbar appearance and adjust layout in form designe…
czwe-01 Nov 17, 2025
05f6c48
style: unify scrollbar styles across form designer, sidebar, and conf…
czwe-01 Nov 17, 2025
e7fe303
Merge remote-tracking branch 'origin' into thulasizwe/fix/3558
czwe-01 Nov 17, 2025
2b6a174
style: remove redundant scrollbar styles and apply unified thin scrol…
czwe-01 Nov 17, 2025
1a6bc7d
style: refactor sidebar styles for consistency and clarity, updating …
czwe-01 Nov 17, 2025
1c64877
rm unrelated changed
czwe-01 Nov 17, 2025
bc330ca
rm tab spaces
czwe-01 Nov 17, 2025
90b0840
cleanup
czwe-01 Nov 17, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion shesha-reactjs/src/components/formDesigner/componentPropertiesPanel/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ const ComponentPropertiesPanelInner: FC = () => {
description={readOnly ? 'Please select a component to view settings' : 'Please select a component to begin editing'}
/>
)}
<div style={{ paddingBottom: '50px' }} ref={settingsPanelRef}></div>
<div ref={settingsPanelRef}></div>
</>
);
};
Expand Down
39 changes: 8 additions & 31 deletions shesha-reactjs/src/components/formDesigner/styles/styles.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -90,7 +90,6 @@ export const useMainStyles = createStyles(({ css, cx, token, prefixCls, iconPref
formName,
formTitle,
formNameParent,
// mainArea,
} = useStyles().styles;

const quickEditModal = cx("sha-designer-modal", css`
Expand Down Expand Up @@ -173,9 +172,11 @@ export const useMainStyles = createStyles(({ css, cx, token, prefixCls, iconPref
}
.${shaToolboxComponents}{
height: 100%;
overflow-y: auto;
overflow-x: hidden;
overflow-y: auto;
overflow-x: hidden;
margin-bottom: 1rem;
scrollbar-width: thin;
${sheshaStyles.thinScrollbars}
}
.${shaDesignerToolbar} {
background: white;
Expand Down Expand Up @@ -254,7 +255,6 @@ export const useMainStyles = createStyles(({ css, cx, token, prefixCls, iconPref
}
}
.${shaDesignerToolbox} {
height: 85vh;
margin-bottom: 3rem;
.${shaDatasourceTree} {
.${prefixCls}-tree-switcher-noop {
Expand Down Expand Up @@ -375,6 +375,10 @@ export const useMainStyles = createStyles(({ css, cx, token, prefixCls, iconPref
}
}

.${designerClassNames.mainArea}{
height: calc(100vh - 60px - 56px);
}

.${designerWorkArea}{
background-color: white;
height: 100%;
Expand All @@ -392,33 +396,6 @@ export const useMainStyles = createStyles(({ css, cx, token, prefixCls, iconPref
.${shaComponent} {
min-height: 30px;
}

/* Improve dropzone visibility during drag operations */
&.sha-components-container-inner {
min-height: 20px;
transition: background-color 0.2s ease, border 0.2s ease;

&:empty {
min-height: 40px;
border: 2px dashed transparent;
border-radius: 4px;
}
}
}

/* Enhanced visual feedback when dragging */
&.${shaDragging} {
.${shaComponentsContainer} {
&.sha-components-container-inner:empty {
border-color: ${token.colorPrimary}40;
background-color: ${token.colorPrimaryBg}20;
}

&.sha-components-container-inner:hover {
border-color: ${token.colorPrimary};
background-color: ${token.colorPrimaryBg}40;
}
}
}

> div {
Expand Down
26 changes: 21 additions & 5 deletions shesha-reactjs/src/components/sidebarContainer/styles/styles.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@ export const useStyles = createStyles(({ css, cx, prefixCls }) => {
.${sidebarContainerMainAreaBody}{
overflow: auto;
height: 100%;

${sheshaStyles.thinScrollbars}
}

.${sidebarContainerHeader} {
Expand All @@ -50,13 +50,18 @@ export const useStyles = createStyles(({ css, cx, prefixCls }) => {
&.open {
width: ${leftSidebarWidth};
display: block;
overflow: auto;
scrollbar-width: thin;
&::-webkit-scrollbar {
width: 6px;
}

.${sidebarHeader} {
.sidebar-header-title {
display: flex;
width:100%;
}

}
}

Expand Down Expand Up @@ -99,16 +104,20 @@ export const useStyles = createStyles(({ css, cx, prefixCls }) => {
overflow-x: hidden;
overflow-y: auto;
display: flex;
height: calc(100vh - 60px - 56px - ${sidebarBtnHeight});
padding: ${sheshaStyles.paddingLG}px;
flex: 1;
scrollbar-width: thin;
&::-webkit-scrollbar {
width: 6px;
}

.sidebar-body-content {
width: 100%;
display: none;

&.open {
display: block;
height: 85vh;
}
}

Expand All @@ -124,7 +133,6 @@ export const useStyles = createStyles(({ css, cx, prefixCls }) => {

.${sidebarContainerLeft} {
border-right: 1px solid lightgrey;
min-height: calc(100vh - 102px);

&.open {
.toggle-open-btn {
Expand All @@ -135,7 +143,6 @@ export const useStyles = createStyles(({ css, cx, prefixCls }) => {

.${sidebarContainerRight} {
border-left: 1px solid lightgrey;
min-height: calc(100vh - 102px);

&.open {
.toggle-open-btn {
Expand Down Expand Up @@ -166,6 +173,11 @@ export const useStyles = createStyles(({ css, cx, prefixCls }) => {

.${canvasWrapper} {
height: calc(100vh - 120px);
overflow: auto;
scrollbar-width: thin;
&::-webkit-scrollbar {
width: 6px;
}
}

[data-sha-c-type="datatable"] {
Expand All @@ -174,6 +186,10 @@ export const useStyles = createStyles(({ css, cx, prefixCls }) => {
display: flex;
flex-direction: column;
overflow: auto;
scrollbar-width: thin;
&::-webkit-scrollbar {
width: 6px;
}
}
}

Expand Down
17 changes: 11 additions & 6 deletions shesha-reactjs/src/configuration-studio/styles.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { createStyles } from '@/styles';
import { createStyles, sheshaStyles } from '@/styles';

export const useStyles = createStyles(({ css, cx, token, prefixCls, iconPrefixCls }) => {
const csHeader = "sha-cs-header";
Expand Down Expand Up @@ -38,7 +38,7 @@ export const useStyles = createStyles(({ css, cx, token, prefixCls, iconPrefixCl
align-items: center;
}
.${csHeaderLeft}{
}
}s
.${csHeaderCenter}{
.${csQuickInfoIcons}{
>.${iconPrefixCls} {
Expand All @@ -56,6 +56,7 @@ export const useStyles = createStyles(({ css, cx, token, prefixCls, iconPrefixCl
.${csTreeArea}{
height: calc(100vh - ${headerHeight}px);
overflow: 'auto';
scrollbar-width: thin;
.${csNavPanelSpinner}{
height: 100%;
>.${prefixCls}-spin-container {
Expand Down Expand Up @@ -85,14 +86,18 @@ export const useStyles = createStyles(({ css, cx, token, prefixCls, iconPrefixCl
}
.${csWorkArea}{
height: calc(100vh - ${headerHeight}px);
overflow: 'auto';
overflow: hidden;

.${csDocTabs}{
height: 100%;
height: calc(100vh - ${headerHeight}px);
>.ant-tabs-content-holder{
height: 100%;
height: calc(100vh - ${headerHeight}px - 56px);
${sheshaStyles.thinScrollbars}
>.ant-tabs-content{
height: 100%;
overflow: hidden;
>.ant-tabs-tabpane {
height: 100%;
}
}
}
}
Expand Down
5 changes: 0 additions & 5 deletions shesha-reactjs/src/designer-components/_settings/styles/styles.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,11 +38,6 @@ export const useStyles = createStyles(({ css, cx, responsive, token }) => {
position: relative;
top: 4px;
}


+.sha-required-mark {
margin-bottom: -16px !important;
}
`);

const bindingOptionsBtn = cx(css`
Expand Down