fix height and padding

This commit is contained in:
hamid zarghami
2025-08-06 16:10:30 +03:30
parent 9617565701
commit 58ec719fa1
5 changed files with 97 additions and 50 deletions
@@ -15,10 +15,7 @@ const GenericSection: FC<GenericSectionProps> = ({ sectionKey }) => {
const { activeSection, activeItemIndex, data, setActiveSection, setActiveItemIndex } = usePersonalityStore()
// Helper function to get numeric height
const getNumericHeight = (height?: string) => {
return parseInt(height?.replace(/px|em|rem|%/g, '') || "123")
}
// Helper function to generate border style object based on selected sides
const generateBorderStyle = (border?: { width?: string; color?: string; style?: string; sides?: string[] }) => {
@@ -38,7 +35,7 @@ const GenericSection: FC<GenericSectionProps> = ({ sectionKey }) => {
}
// Generate individual border sides
const borderStyle: any = {}
const borderStyle: Record<string, string> = {}
sides.forEach(side => {
borderStyle[`border${side.charAt(0).toUpperCase() + side.slice(1)}`] = `${width} ${style} ${color}`
})
@@ -125,7 +122,6 @@ const GenericSection: FC<GenericSectionProps> = ({ sectionKey }) => {
{
sectionData.columnsCount > 0 ?
<td style={{
padding: '10px',
...(() => {
const borderStyle = generateBorderStyle(sectionData.border)
if (activeSection === sectionKey) {
@@ -149,7 +145,7 @@ const GenericSection: FC<GenericSectionProps> = ({ sectionKey }) => {
})(),
borderRadius: '24px',
cursor: 'pointer',
height: sectionData.height || '123px'
padding: sectionData.padding || '10px'
}}>
<table width="100%" cellPadding="0" cellSpacing="0" border={0} style={{ tableLayout: 'fixed' }}>
<tbody>
@@ -193,7 +189,7 @@ const GenericSection: FC<GenericSectionProps> = ({ sectionKey }) => {
<tr>
<td
width="100%"
height={getNumericHeight(sectionData.height).toString()}
height={parseInt(sectionData.height || '123px')}
style={{
padding: '8px',
cursor: 'pointer'
@@ -210,7 +206,7 @@ const GenericSection: FC<GenericSectionProps> = ({ sectionKey }) => {
<tr>
<td
width="100%"
height={getNumericHeight(sectionData.height).toString()}
height={parseInt(sectionData.height || '123px')}
align={getButtonHorizontalAlign(item.buttons[0])}
valign={getButtonVerticalAlign(item.buttons[0])}
style={{
@@ -231,8 +227,8 @@ const GenericSection: FC<GenericSectionProps> = ({ sectionKey }) => {
<td
width="100%"
height={item?.buttons && item.buttons.length > 0 ?
Math.floor(getNumericHeight(sectionData.height) * 0.6).toString() :
Math.floor(getNumericHeight(sectionData.height) * 0.8).toString()}
Math.max(parseInt(sectionData.height || '123px') - 50, 30) :
Math.max(parseInt(sectionData.height || '123px') - 25, 30)}
align={item?.texts?.[0]?.alignment || 'center'}
valign={item?.texts?.[0]?.verticalAlignment === VerticalAlignment.TOP ? 'top' :
item?.texts?.[0]?.verticalAlignment === VerticalAlignment.BOTTOM ? 'bottom' : 'middle'}
@@ -264,7 +260,7 @@ const GenericSection: FC<GenericSectionProps> = ({ sectionKey }) => {
<tr>
<td
width="100%"
height={Math.floor(getNumericHeight(sectionData.height) * 0.2).toString()}
height="25"
align={getButtonHorizontalAlign(item.buttons[0])}
valign={getButtonVerticalAlign(item.buttons[0])}
style={{