fix: grid view count

src/frameworks/customtk/widgets/button.js

@@ -70,6 +70,7 @@ class Button extends CustomTkWidgetBase{
             <div className="tw-w-flex tw-flex-col tw-w-full tw-h-full tw-rounded-md 
                             tw-border tw-border-solid tw-border-gray-400 tw-overflow-hidden">
                 <div className="tw-p-2 tw-w-full tw-flex tw-place-content-center tw-place-items-center tw-h-full tw-text-center" 
+                        ref={this.styleAreaRef}
                         style={this.getInnerRenderStyling()}>
                     {/* {this.props.children} */}
                     <div className="tw-text-sm" style={{color: this.getAttrValue("styling.foregroundColor")}}>

src/frameworks/customtk/widgets/checkButton.js

@@ -213,6 +213,7 @@ export class RadioButton extends CustomTkWidgetBase{
 
         return (
             <div className="tw-flex tw-p-1 tw-w-full tw-h-full tw-rounded-md tw-overflow-hidden"
+                ref={this.styleAreaRef}
                 style={this.getInnerRenderStyling()}
                 >
                 <div className="tw-flex tw-flex-col tw-gap-2 tw-w-fit tw-h-fit">

src/frameworks/customtk/widgets/frame.js

@@ -46,7 +46,9 @@ class Frame extends CustomTkBase{
         // console.log("widget styling: ", this.state.widgetInnerStyling)
         return (
             <div className="tw-w-flex tw-flex-col tw-w-full tw-h-full tw-relative tw-rounded-md tw-overflow-hidden">
-                <div className="tw-p-2 tw-w-full tw-h-full tw-content-start" style={this.getInnerRenderStyling()}>
+                <div className="tw-p-2 tw-w-full tw-h-full tw-content-start" 
+                        ref={this.styleAreaRef}
+                        style={this.getInnerRenderStyling()}>
                     {this.props.children}
                 </div>
             </div>

src/frameworks/customtk/widgets/input.js

@@ -66,6 +66,7 @@ export class Input extends CustomTkWidgetBase{
         return (
             <div className="tw-w-flex tw-flex-col tw-w-full tw-h-full tw-rounded-md tw-overflow-hidden">
                 <div className="tw-p-2 tw-w-full tw-h-full tw-flex tw-place-items-center" 
+                        ref={this.styleAreaRef}
                         style={this.getInnerRenderStyling()}>
                     <div className="tw-text-sm tw-text-gray-300">
                         {this.getAttrValue("placeHolder")}

src/frameworks/customtk/widgets/label.js

@@ -129,6 +129,7 @@ class Label extends CustomTkWidgetBase{
                     }}
                 >
                 <div className="tw-p-2 tw-w-full tw-h-full  tw-flex tw-place-content-center tw-place-items-center " 
+                        ref={this.styleAreaRef}
                         style={this.getInnerRenderStyling()}>
                     {/* {this.props.children} */}
                     {

src/frameworks/customtk/widgets/mainWindow.js

@@ -81,6 +81,7 @@ class MainWindow extends CustomTkBase{
                     </div>
                 </div>
                 <div className="tw-p-2 tw-w-full tw-relative tw-h-full tw-overflow-hidden tw-content-start" 
+                        ref={this.styleAreaRef}
                         style={this.state.widgetInnerStyling}>
                     {this.props.children}
                 </div>

src/frameworks/customtk/widgets/optionMenu.js

@@ -103,6 +103,7 @@ class OptionMenu extends CustomTkWidgetBase{
 
         return (
             <div className="tw-flex tw-p-1 tw-w-full tw-h-full tw-rounded-md tw-overflow-hidden"
+                ref={this.styleAreaRef}    
                 style={this.getInnerRenderStyling()}
                 onClick={this.toggleDropDownOpen}
                 >

src/frameworks/customtk/widgets/slider.js

@@ -143,7 +143,9 @@ class Slider extends CustomTkWidgetBase{
         return (
             <div className="tw-w-flex tw-flex-col tw-w-full tw-h-full tw-rounded-md tw-overflow-hidden">
                 <div className="flex flex-col items-center justify-center h-screen 
-                                bg-gray-100" style={this.getInnerRenderStyling()}>
+                                bg-gray-100" 
+                            ref={this.styleAreaRef}
+                            style={this.getInnerRenderStyling()}>
                     <div className="w-full max-w-md">
                         <input
                             type="range"

src/frameworks/customtk/widgets/spinBox.js

@@ -110,6 +110,7 @@ class SpinBox extends CustomTkWidgetBase{
         return (
             <div className="tw-w-flex tw-flex-col tw-w-full tw-h-full tw-rounded-md tw-overflow-hidden">
                 <div className="tw-p-2 tw-w-full tw-h-full tw-flex tw-place-items-center tw-justify-between" 
+                        ref={this.styleAreaRef}
                         style={this.getInnerRenderStyling()}>
                     <div className="tw-text-sm ">
                         {this.getAttrValue("spinProps.default")}

src/frameworks/customtk/widgets/toplevel.js

@@ -77,7 +77,9 @@ class TopLevel extends Widget{
                         </div>
                     </div>
                 </div>
-                <div className="tw-p-2 tw-w-full tw-h-full tw-content-start" style={this.state.widgetInnerStyling}>
+                <div className="tw-p-2 tw-w-full tw-h-full tw-content-start" 
+                    ref={this.styleAreaRef}
+                    style={this.state.widgetInnerStyling}>
                     {this.props.children}
                 </div>
             </div>