fix: Misaligned global controls in Table chart (#34799)

superset-frontend/plugins/plugin-chart-table/src/DataTable/DataTable.tsx

@@ -451,9 +451,7 @@ export default typedMemo(function DataTable<D extends object>({
       {hasGlobalControl ? (
         <div ref={globalControlRef} className="form-inline dt-controls">
           <StyledRow className="row">
-            <div
-              className={renderTimeComparisonDropdown ? 'col-sm-4' : 'col-sm-5'}
-            >
+            <StyledSpace size="middle">
               {hasPagination ? (
                 <SelectPageSize
                   total={resultsSize}
@@ -467,23 +465,17 @@ export default typedMemo(function DataTable<D extends object>({
                   onChange={setPageSize}
                 />
               ) : null}
-            </div>
-            {searchInput ? (
-              <StyledSpace
-                className={
-                  renderTimeComparisonDropdown ? 'col-sm-7' : 'col-sm-8'
-                }
-              >
-                {serverPagination && (
-                  <div className="search-select-container">
-                    <span className="search-by-label">Search by: </span>
-                    <SearchSelectDropdown
-                      searchOptions={searchOptions}
-                      value={serverPaginationData?.searchColumn || ''}
-                      onChange={onSearchColChange}
-                    />
-                  </div>
-                )}
+              {serverPagination && (
+                <div className="search-select-container">
+                  <span className="search-by-label">Search by: </span>
+                  <SearchSelectDropdown
+                    searchOptions={searchOptions}
+                    value={serverPaginationData?.searchColumn || ''}
+                    onChange={onSearchColChange}
+                  />
+                </div>
+              )}
+              {searchInput && (
                 <GlobalFilter<D>
                   searchInput={
                     typeof searchInput === 'boolean' ? undefined : searchInput
@@ -497,16 +489,11 @@ export default typedMemo(function DataTable<D extends object>({
                   serverPagination={!!serverPagination}
                   rowCount={rowCount}
                 />
-              </StyledSpace>
-            ) : null}
-            {renderTimeComparisonDropdown ? (
-              <div
-                className="col-sm-1"
-                style={{ float: 'right', marginTop: '6px' }}
-              >
-                {renderTimeComparisonDropdown()}
-              </div>
-            ) : null}
+              )}
+              {renderTimeComparisonDropdown
+                ? renderTimeComparisonDropdown()
+                : null}
+            </StyledSpace>
           </StyledRow>
         </div>
       ) : null}

superset-frontend/plugins/plugin-chart-table/src/TableChart.tsx

@@ -197,7 +197,6 @@ function SearchInput({
     <Space direction="horizontal" size={4} className="dt-global-filter">
       {t('Search')}
       <Input
-        size="small"
         aria-label={t('Search %s records', count)}
         placeholder={tn('search.num_records', count)}
         value={value}