Repository: appsmithorg/appsmith
File: app/client/src/PluginActionEditor/components/PluginActionForm/components/CommonEditorForm/CommonEditorForm.tsx (TypeScript)

Code before:
const CommonEditorForm = (props: Props) => {
  const {
    action,
    bodyUIComponent,
    formName,
    isChangePermitted,
    paginationUiComponent,
  } = props;
  const hintMessages = action.messages || [];
  const theme = EditorTheme.LIGHT;
  const {
    actionHeaders,
    actionParams,
    autoGeneratedHeaders,
    datasourceHeaders,
    datasourceParams,
  } = useGetFormActionValues();

  const [currentTab, setCurrentTab] = useSelectedFormTab();
  const headersCount = getHeadersCount(
    actionHeaders,
    datasourceHeaders,
    autoGeneratedHeaders,
  );
  const paramsCount = getParamsCount(actionParams, datasourceHeaders);

  return (
    <Styled.Tabs onValueChange={setCurrentTab} value={currentTab}>
      <Styled.FormHeader>
        <InfoFields
          actionName={action.name}
          changePermitted={props.isChangePermitted}
          formName={props.formName}
          options={props.httpMethodOptions}
          pluginId={action.pluginId}
          theme={theme}
        />
        <HintMessages hintMessages={hintMessages} />
        <TabsList>
          {Object.values(API_EDITOR_TABS)
            .filter((tab) => {
              return tab !== API_EDITOR_TABS.SETTINGS;
            })
            .map((tab) => (
              <Tab
                data-testid={`t--api-editor-${tab}`}
                key={tab}
                notificationCount={
                  tab == "HEADERS"
                    ? headersCount
                    : tab == "PARAMS"

Review comment (suggestion):
<img width="955" alt="Screenshot 2024-12-24 at 10 33 32 AM" src="https://github.com/user-attachments/assets/550b8298-9c3a-4ba2-a0fb-61f9034f7462" />


Seeing this sticky getting cut off when scrolling

Code after:
    action,
    bodyUIComponent,
    formName,
    isChangePermitted,
    paginationUiComponent,
  } = props;
  const hintMessages = action.messages || [];
  const theme = EditorTheme.LIGHT;
  const {
    actionHeaders,
    actionParams,
    autoGeneratedHeaders,
    datasourceHeaders,
    datasourceParams,
  } = useGetFormActionValues();

  const [currentTab, setCurrentTab] = useSelectedFormTab();
  const headersCount = getHeadersCount(
    actionHeaders,
    datasourceHeaders,
    autoGeneratedHeaders,
  );
  const paramsCount = getParamsCount(actionParams, datasourceHeaders);

  return (
    <Styled.Tabs onValueChange={setCurrentTab} value={currentTab}>
      <Styled.FormHeader>
        <InfoFields
          actionName={action.name}
          changePermitted={props.isChangePermitted}
          formName={props.formName}
          options={props.httpMethodOptions}
          pluginId={action.pluginId}
          theme={theme}
        />
        <HintMessages hintMessages={hintMessages} />
        <TabsList>
          {Object.values(API_EDITOR_TABS)
            .filter((tab) => {
              return tab !== API_EDITOR_TABS.SETTINGS;
            })
            .map((tab) => (
              <Tab
                data-testid={`t--api-editor-${tab}`}
                key={tab}
                notificationCount={
                  tab == "HEADERS"
                    ? headersCount
                    : tab == "PARAMS"
                      ? paramsCount
                      : undefined