fix: checkbox column misalignment on table widget (#34222)

Fixes #21790
_or_  
Fixes [Issue URL](https://github.com/appsmithorg/appsmith/issues/21790)

Introduced a new prop called isFullWidth for the CheckboxComponent and
pass this prop to this styled component CheckboxContainer. The
isFullWidth is an optional boolean property whole default value would be
true.
 
Added screenshot for reference.

![image](https://github.com/appsmithorg/appsmith/assets/119920490/1e5f3a9c-d98a-4525-85bc-8f6f471435ed)

<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit

- **New Features**
- Introduced a full-width option for checkboxes to enable better styling
flexibility.
  
- **Tests**
- Added new test cases to verify checkbox styling properties in tables.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

app/client/cypress/e2e/Regression/ClientSide/Widgets/TableV2/columnTypes/checkboxCell_spec.js

@@ -63,6 +63,25 @@ describe(
       // Check horizontal alignment
       cy.get("[data-value='CENTER']").first().click();
 
+      function verifyJustifyContent(selector) {
+        return cy
+          .get(selector + " div")
+          .should("have.css", "justify-content", "center");
+      }
+
+      function verifyWidthAuto($el) {
+        // Ensure the width is 'auto' by checking it doesn't have an explicit value
+        expect($el[0].style.width).to.be.empty;
+      }
+      cy.getTableV2DataSelector("0", "4")
+        .then((selector) => {
+          verifyJustifyContent(selector);
+          return cy.get(`${selector} div`).children().first();
+        })
+        .then(($el) => {
+          verifyWidthAuto($el);
+        });
+
       cy.getTableV2DataSelector("0", "4").then((selector) => {
         cy.get(selector + " div").should(
           "have.css",

app/client/src/widgets/CheckboxWidget/component/index.tsx

@@ -13,6 +13,7 @@ interface StyledCheckboxContainerProps {
   noContainerPadding?: boolean;
   labelPosition?: LabelPosition;
   minHeight?: number;
+  $isFullWidth?: boolean;
 }
 
 const DEFAULT_BORDER_RADIUS = "0";
@@ -24,7 +25,7 @@ const CheckboxContainer = styled.div<StyledCheckboxContainerProps>`
     display: flex;
     height: 100%;
     justify-content: start;
-    width: 100%;
+    width: ${({ $isFullWidth }) => ($isFullWidth ? "100%" : "auto")};
 
     ${({ minHeight }) => `
     ${minHeight ? `min-height: ${minHeight}px;` : ""}`};
@@ -79,6 +80,9 @@ export const StyledCheckbox = styled(Checkbox)`
 `;
 
 class CheckboxComponent extends React.Component<CheckboxComponentProps> {
+  static readonly defaultProps = {
+    isFullWidth: true,
+  };
   render() {
     /**
      * When the label position is left align checkbox to the right
@@ -99,6 +103,7 @@ class CheckboxComponent extends React.Component<CheckboxComponentProps> {
 
     return (
       <CheckboxContainer
+        $isFullWidth={this.props.isFullWidth}
         isValid={isValid}
         minHeight={this.props.minHeight}
         noContainerPadding={this.props.noContainerPadding}
@@ -158,6 +163,7 @@ export interface CheckboxComponentProps extends ComponentProps {
   labelStyle?: string;
   isLabelInline?: boolean;
   minHeight?: number;
+  isFullWidth?: boolean;
 }
 
 export default CheckboxComponent;

app/client/src/widgets/TableWidgetV2/component/cellComponents/CheckboxCell.tsx

@@ -84,6 +84,7 @@ const CheckboxCellComponent = (props: CheckboxCellProps) => {
       borderRadius={borderRadius}
       isChecked={value}
       isDisabled={!!disabledCheckbox || !isCellEditable}
+      isFullWidth={false}
       isLoading={false}
       isRequired={false}
       label=""