fix: fix layout issues

Author: iobuhov

packages/modules/data-widgets/src/themesource/datawidgets/web/_datagrid.scss

@@ -569,6 +569,11 @@ $root: ".widget-datagrid";
     padding: var(--spacing-small) 0;
 }
 
+:where(#{$root}-pb-middle) {
+    display: flex;
+    justify-content: center;
+}
+
 :where(#{$root}-pb-start, #{$root}-tb-start) {
     padding-inline: var(--spacing-medium);
     display: flex;
@@ -583,6 +588,7 @@ $root: ".widget-datagrid";
     padding: 0.3em 0.5em;
     border-radius: 6px;
     display: inline-block;
+    white-space: nowrap;
 
     &:hover,
     &:focus-visible {

packages/pluggableWidgets/datagrid-web/src/components/WidgetFooter.tsx

@@ -20,23 +20,23 @@ export const WidgetFooter = observer(function WidgetFooter(props: WidgetFooterPr
     return (
         <div {...rest} className="widget-datagrid-footer table-footer">
             <div className="widget-datagrid-paging-bottom">
-                <If condition={selectionCounterVM.isBottomCounterVisible}>
-                    <div className="widget-datagrid-pb-start">
+                <div className="widget-datagrid-pb-start">
+                    <If condition={selectionCounterVM.isBottomCounterVisible}>
                         <SelectionCounter />
-                    </div>
-                </If>
-                <div className="widget-datagrid-pb-end">
-                    {pagination}
-                    {hasMoreItems && paginationType === "loadMore" && (
+                    </If>
+                </div>
+                {hasMoreItems && paginationType === "loadMore" && (
+                    <div className="widget-datagrid-pb-middle">
                         <button
                             className="btn btn-primary widget-datagrid-load-more"
                             onClick={() => setPage && setPage(prev => prev + 1)}
                             tabIndex={0}
                         >
                             {loadMoreButtonCaption}
                         </button>
-                    )}
-                </div>
+                    </div>
+                )}
+                <div className="widget-datagrid-pb-end">{pagination}</div>
             </div>
         </div>
     );

packages/pluggableWidgets/datagrid-web/src/components/WidgetTopBar.tsx

@@ -15,14 +15,14 @@ export const WidgetTopBar = observer(function WidgetTopBar(props: WidgetTopBarPr
     return (
         <div {...rest} className="widget-datagrid-top-bar table-header">
             <div className="widget-datagrid-padding-top">
-                <If condition={selectionCounter.isTopCounterVisible}>
-                    <div className="widget-datagrid-tb-start">
+                <div className="widget-datagrid-tb-start">
+                    <If condition={selectionCounter.isTopCounterVisible}>
                         <SelectionCounter />
-                    </div>
-                </If>
-                <If condition={!!pagination}>
-                    <div className="widget-datagrid-tb-end">{pagination}</div>
-                </If>
+                    </If>
+                </div>
+                <div className="widget-datagrid-tb-end">
+                    <If condition={!!pagination}>{pagination}</If>
+                </div>
             </div>
         </div>
     );