fix height and padding
This commit is contained in:
@@ -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={{
|
||||
|
||||
Reference in New Issue
Block a user