fix: Hacky fixes to make table work in Anvil Safari (#28417)

> Pull Request Template
>
> Use this template to quickly create a well written pull request.
Delete all quotes before creating the pull request.
>
## Description
In this PR we are making few hacky changes to WDS Table widget to make
it work in safari as well as function as expected in all browsers.
Table widget current version is a copied version of Fixed layout so it
expects dimensions to be set unlike other WDS widgets so adding
dimensions in a hacky way.
In safari simple bar css doesnt see to work well, they overflow and
cover all other widgets. @jsartisan and I tried to understand the issue,
but for now making the wrapper position: sticky for some reason works.
so adding that as well.

All these fixes are hacky so that we get a usable Anvil Edito, but they
are safe coz WDS widgets are not used anywhere except Anvil and Anvil is
under a feature flag.

#### PR fixes following issue(s)
Fixes # (issue number)
> if no issue exists, please create an issue and ask the maintainers
about this first
>
>
#### Media
> A video or a GIF is preferred. when using Loom, don’t embed because it
looks like it’s a GIF. instead, just link to the video
>
>
#### Type of change
> Please delete options that are not relevant.
- Bug fix (non-breaking change which fixes an issue)
- New feature (non-breaking change which adds functionality)
- Breaking change (fix or feature that would cause existing
functionality to not work as expected)
- Chore (housekeeping or task changes that don't impact user perception)
- This change requires a documentation update
>
>
>
## Testing
>
#### How Has This Been Tested?
> Please describe the tests that you ran to verify your changes. Also
list any relevant details for your test configuration.
> Delete anything that is not relevant
- [ ] Manual
- [ ] JUnit
- [ ] Jest
- [ ] Cypress
>
>
#### Test Plan
> Add Testsmith test cases links that relate to this PR
>
>
#### Issues raised during DP testing
> Link issues raised during DP testing for better visiblity and tracking
(copy link from comments dropped on this PR)
>
>
>
## Checklist:
#### Dev activity
- [ ] My code follows the style guidelines of this project
- [ ] I have performed a self-review of my own code
- [ ] I have commented my code, particularly in hard-to-understand areas
- [ ] I have made corresponding changes to the documentation
- [ ] My changes generate no new warnings
- [ ] I have added tests that prove my fix is effective or that my
feature works
- [ ] New and existing unit tests pass locally with my changes
- [ ] PR is being merged under a feature flag


#### QA activity:
- [ ] [Speedbreak
features](https://github.com/appsmithorg/TestSmith/wiki/Guidelines-for-test-plans#speedbreakers-)
have been covered
- [ ] Test plan covers all impacted features and [areas of
interest](https://github.com/appsmithorg/TestSmith/wiki/Guidelines-for-test-plans#areas-of-interest-)
- [ ] Test plan has been peer reviewed by project stakeholders and other
QA members
- [ ] Manually tested functionality on DP
- [ ] We had an implementation alignment call with stakeholders post QA
Round 2
- [ ] Cypress test cases have been added and approved by SDET/manual QA
- [ ] Added `Test Plan Approved` label after Cypress tests were reviewed
- [ ] Added `Test Plan Approved` label after JUnit tests were reviewed

app/client/src/layoutSystems/anvil/common/AnvilFlexComponent.tsx

@@ -157,6 +157,8 @@ export function AnvilFlexComponent(props: AnvilFlexComponentProps) {
   const styleProps: CSSProperties = useMemo(() => {
     return {
       position: "relative",
+      // overflow is set to make sure widgets internal components/divs don't overflow this boundary causing scrolls
+      overflow: "hidden",
       opacity: isDragging && isSelected ? 0.5 : 1,
       "&:hover": {
         zIndex: onHoverZIndex,

app/client/src/widgets/wds/WDSTableWidget/component/TableStyledWrappers.tsx

@@ -61,6 +61,10 @@ export const TableWrapper = styled.div<{
   justify-content: space-between;
   flex-direction: column;
   overflow: hidden;
+
+  /* wriiten exclusively for safari */
+  position: sticky;
+
   .simplebar-track {
     opacity: 0.7;
     &.simplebar-horizontal {

app/client/src/widgets/wds/WDSTableWidget/widget/index.tsx

@@ -138,6 +138,7 @@ import {
   ResponsiveBehavior,
 } from "layoutSystems/common/utils/constants";
 import IconSVG from "../icon.svg";
+import { getAnvilWidgetDOMId } from "layoutSystems/common/utils/LayoutElementPositionsObserver/utils";
 
 const ReactTableComponent = lazy(async () =>
   retryPromise(async () => import("../component")),
@@ -1180,7 +1181,12 @@ export class WDSTableWidget extends BaseWidget<TableWidgetProps, WidgetState> {
 
   getPaddingAdjustedDimensions = () => {
     // eslint-disable-next-line prefer-const
-    let { componentHeight, componentWidth } = this.props;
+    let { componentHeight } = this.props;
+    // Hacky fix for now to supply width to table widget
+    let componentWidth: number =
+      document
+        .getElementById(getAnvilWidgetDOMId(this.props.widgetId))
+        ?.getBoundingClientRect().width || this.props.componentWidth;
     // (2 * WIDGET_PADDING) gives the total horizontal padding (i.e. paddingLeft + paddingRight)
     componentWidth = componentWidth - 2 * WIDGET_PADDING;
     return { componentHeight, componentWidth };