fix: Button size inside the Table widget has increased + Property pane's panel not scrollable + Alignment issues (#9318)

app/client/src/comments/CommentThread/CommentThread.tsx

@@ -42,7 +42,7 @@ const ThreadContainer = styled(animated.div).withConfig({
   pinned?: boolean;
   maxHeight: string;
 }>`
-  width: 100%;
+  width: ${(props) => (props.inline ? "280px" : "100%")};
   max-width: 100%;
   background-color: ${(props) =>
     props.inline

app/client/src/components/editorComponents/Button.tsx

@@ -26,10 +26,6 @@ const outline = css`
 const buttonStyles = css<Partial<ButtonProps>>`
   ${BlueprintButtonIntentsCSS}
   &&&& {
-    padding: ${(props) =>
-      props.filled || props.outline
-        ? props.theme.spaces[2] + "px " + props.theme.spaces[3] + "px"
-        : 0};
     border-radius: 0;
     background: ${(props) =>
       props.filled || props.outline ? "inherit" : "transparent"};

app/client/src/components/editorComponents/GlobalSearch/SnippetRefinements.tsx

@@ -19,6 +19,8 @@ const RefinementListContainer = styled.div`
     justify-content: flex-start;
     flex-wrap: wrap;
     .refinement-pill {
+      display: flex;
+      align-items: center;
       margin: 2px 5px 0;
       padding: 5px;
       color: ${(props) => props.theme.colors.globalSearch.primaryTextColor};

app/client/src/components/editorComponents/GlobalSearch/SnippetsFilter.tsx

@@ -160,14 +160,19 @@ function SnippetsFilter({ refinements, snippetsEmpty }: any) {
       showFilter={showSnippetFilter}
       snippetsEmpty={snippetsEmpty}
     >
-      <button onClick={() => toggleSnippetFilter(!showSnippetFilter)}>
+      <button
+        className="flex items-center justify-center space-x-1"
+        onClick={() => toggleSnippetFilter(!showSnippetFilter)}
+      >
         {!showSnippetFilter && <FilterIcon />}
+
         {!showSnippetFilter &&
           refinements.entities &&
           refinements.entities &&
-          refinements.entities.length > 0 &&
-          ` ${refinements.entities.length}`}
-        {!showSnippetFilter && " Filter"}
+          refinements.entities.length > 0 && (
+            <span>{refinements.entities.length}</span>
+          )}
+        {!showSnippetFilter && <span> Filter</span>}
         {showSnippetFilter && <CloseFilterIcon />}
       </button>
       <div className="filter-list">

app/client/src/components/editorComponents/JSResponseView.tsx

@@ -214,7 +214,7 @@ function JSResponseView(props: Props) {
           </HelpSection>
           <ResponseTabWrapper className={errors.length ? "disable" : ""}>
             {sortedActionList && !sortedActionList?.length ? (
-              <NoResponseContainer>
+              <NoResponseContainer className="flex items-center">
                 {createMessage(EMPTY_JS_OBJECT)}
               </NoResponseContainer>
             ) : (
@@ -248,7 +248,7 @@ function JSResponseView(props: Props) {
                   ) : !responses.hasOwnProperty(selectActionId) ? (
                     <NoResponseContainer className="empty">
                       <Icon name="no-response" />
-                      <Text type={TextType.P1}>
+                      <Text className="flex items-center" type={TextType.P1}>
                         {EMPTY_RESPONSE_FIRST_HALF()}
                         <RunFunction className="response-run" />
                         {EMPTY_RESPONSE_LAST_HALF()}

app/client/src/pages/Applications/index.tsx

@@ -796,20 +796,20 @@ function ApplicationsSection(props: any) {
                                 }
                                 underline
                               />
-                              <MenuItem
-                                cypressSelector="t--org-setting"
-                                icon="general"
-                                onSelect={() =>
-                                  getOnSelectAction(
-                                    DropdownOnSelectActions.REDIRECT,
-                                    {
-                                      path: `/org/${organization.id}/settings/general`,
-                                    },
-                                  )
-                                }
-                                text="Organization Settings"
-                              />
                             </div>
+                            <MenuItem
+                              cypressSelector="t--org-setting"
+                              icon="general"
+                              onSelect={() =>
+                                getOnSelectAction(
+                                  DropdownOnSelectActions.REDIRECT,
+                                  {
+                                    path: `/org/${organization.id}/settings/general`,
+                                  },
+                                )
+                              }
+                              text="Organization Settings"
+                            />
                             {enableImportExport && (
                               <MenuItem
                                 cypressSelector="t--org-import-app"

app/client/src/pages/Editor/GeneratePage/components/DataSourceOption.tsx

@@ -29,7 +29,7 @@ const OptionWrapper = styled.div<{
   display: flex;
   align-items: center;
   user-select: none;
-  width: ${(props) => props.width};
+  width: 100%;
 
   &&& svg {
     rect {

app/client/src/pages/Editor/GeneratePage/components/GeneratePageForm/GeneratePageForm.tsx

@@ -608,14 +608,14 @@ function GeneratePageForm() {
     !selectedTable.value || !showSubmitButton || isSelectedTableEmpty;
 
   return (
-    <div>
+    <div className="space-y-4">
       <Wrapper>
         <DescWrapper>
           <Title>{GENERATE_PAGE_FORM_TITLE()}</Title>
         </DescWrapper>
       </Wrapper>
       <FormWrapper>
-        <SelectWrapper width={DROPDOWN_DIMENSION.WIDTH}>
+        <SelectWrapper className="space-y-3" width={DROPDOWN_DIMENSION.WIDTH}>
           <Label>{createMessage(GEN_CRUD_DATASOURCE_DROPDOWN_LABEL)}</Label>
           <Dropdown
             cypressSelector="t--datasource-dropdown"
@@ -641,7 +641,7 @@ function GeneratePageForm() {
           />
         </SelectWrapper>
         {selectedDatasource.value ? (
-          <SelectWrapper width={DROPDOWN_DIMENSION.WIDTH}>
+          <SelectWrapper className="space-y-3" width={DROPDOWN_DIMENSION.WIDTH}>
             <Label>
               Select {pluginField.TABLE} from{" "}
               <Bold>{selectedDatasource.label}</Bold>
@@ -673,7 +673,10 @@ function GeneratePageForm() {
         {!isGoogleSheetPlugin ? (
           <>
             {showSearchableColumn && (
-              <SelectWrapper width={DROPDOWN_DIMENSION.WIDTH}>
+              <SelectWrapper
+                className="space-y-3"
+                width={DROPDOWN_DIMENSION.WIDTH}
+              >
                 <Row>
                   Select a searchable {pluginField.COLUMN} from the
                   selected&nbsp;
@@ -712,12 +715,14 @@ function GeneratePageForm() {
                 />
               </SelectWrapper>
             )}
-            <GeneratePageSubmitBtn
-              disabled={submitButtonDisable}
-              isLoading={!!isGeneratingTemplatePage}
-              onSubmit={handleFormSubmit}
-              showSubmitButton={!!showSubmitButton}
-            />
+            <div className="mt-4">
+              <GeneratePageSubmitBtn
+                disabled={submitButtonDisable}
+                isLoading={!!isGeneratingTemplatePage}
+                onSubmit={handleFormSubmit}
+                showSubmitButton={!!showSubmitButton}
+              />
+            </div>
           </>
         ) : (
           <GoogleSheetForm

app/client/src/pages/Editor/PropertyPane/PanelPropertiesEditor.tsx

@@ -159,7 +159,7 @@ export function PanelPropertiesEditor(
     }
   };
   return (
-    <div className="relative flex flex-col w-full py-3 space-y-2">
+    <div className="relative flex flex-col w-full pt-3 overflow-y-auto">
       <PanelHeader
         closePanel={closePanel}
         isEditable={panelConfig.editableTitle}
@@ -167,7 +167,7 @@ export function PanelPropertiesEditor(
         title={panelProps[panelConfig.titlePropertyName]}
         updatePropertyTitle={updatePropertyTitle}
       />
-      <div className="px-3">
+      <div className="p-3 pb-24 overflow-y-scroll">
         {panelConfigs &&
           generatePropertyControl(panelConfigs as PropertyPaneConfig[], {
             id: widgetProperties.widgetId,

app/client/src/pages/common/CanvasSelectionArena.tsx

@@ -12,6 +12,7 @@ import { getAppMode } from "selectors/applicationSelectors";
 import {
   getCurrentApplicationLayout,
   getCurrentPageId,
+  previewModeSelector,
 } from "selectors/editorSelectors";
 import styled from "styled-components";
 import { getNearestParentCanvas } from "utils/generators";
@@ -68,6 +69,7 @@ export function CanvasSelectionArena({
     (parentWidget && parentWidget.detachFromLayout)
   );
   const appMode = useSelector(getAppMode);
+  const isPreviewMode = useSelector(previewModeSelector);
   const isDragging = useSelector(
     (state: AppState) => state.ui.widgetDragResize.isDragging,
   );
@@ -442,7 +444,8 @@ export function CanvasSelectionArena({
   ]);
 
   const shouldShow =
-    appMode === APP_MODE.EDIT && !(isDragging || isResizing || isCommentMode);
+    appMode === APP_MODE.EDIT &&
+    !(isDragging || isResizing || isCommentMode || isPreviewMode);
 
   return shouldShow ? (
     <StyledSelectionCanvas

app/client/src/pages/common/PageNotFound.tsx

@@ -34,13 +34,13 @@ function PageNotFound(props: Props) {
   const { flushErrorsAndRedirect } = props;
 
   return (
-    <Wrapper>
+    <Wrapper className="space-y-6">
       <img
         alt="Page Unavailable"
-        className="page-unavailable-img"
+        className="mx-auto page-unavailable-img"
         src={PageUnavailableImage}
       />
-      <div>
+      <div className="space-y-2">
         <p className="bold-text">{createMessage(PAGE_NOT_FOUND)}</p>
         <p>
           Either this page doesn&apos;t exist, or you don&apos;t have access to{" "}

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

@@ -3,9 +3,11 @@ import styled from "styled-components";
 import { hexToRgba } from "widgets/WidgetUtils";
 
 import { ComponentProps } from "widgets/BaseComponent";
-import { AppState } from "reducers";
 import { useSelector } from "store";
-import { RenderMode, RenderModes } from "constants/WidgetConstants";
+import { RenderMode } from "constants/WidgetConstants";
+import { getWidgetPropsForPropertyPane } from "selectors/propertyPaneSelectors";
+import { getAppMode } from "selectors/applicationSelectors";
+import { APP_MODE } from "entities/App";
 
 interface IframeContainerProps {
   borderColor?: string;
@@ -64,7 +66,6 @@ function IframeComponent(props: IframeComponentProps) {
     borderWidth,
     onMessageReceived,
     onURLChanged,
-    renderMode,
     source,
     title,
     widgetId,
@@ -95,12 +96,8 @@ function IframeComponent(props: IframeComponentProps) {
     }
   }, [source]);
 
-  const isPropertyPaneVisible = useSelector(
-    (state: AppState) => state.ui.propertyPane.isVisible,
-  );
-  const selectedWidgetId = useSelector(
-    (state: AppState) => state.ui.propertyPane.widgetId,
-  );
+  const appMode = useSelector(getAppMode);
+  const selectedWidget = useSelector(getWidgetPropsForPropertyPane);
 
   return (
     <IframeContainer
@@ -108,10 +105,9 @@ function IframeComponent(props: IframeComponentProps) {
       borderOpacity={borderOpacity}
       borderWidth={borderWidth}
     >
-      {renderMode === RenderModes.CANVAS &&
-        !(isPropertyPaneVisible && widgetId === selectedWidgetId) && (
-          <OverlayDiv />
-        )}
+      {appMode === APP_MODE.EDIT && widgetId !== selectedWidget?.widgetId && (
+        <OverlayDiv />
+      )}
 
       {message ? message : <iframe src={source} title={title} />}
     </IframeContainer>