Grid buttons responsive

ui/src/components/template/AiAssistant.tsx

@@ -20,7 +20,7 @@ const AiAssistant = () => {
     <Tooltip title={translate('::Abp.Identity.Ai')}>
       <div
         onClick={() => navigate(ROUTES_ENUM.protected.admin.ai)}
-        className="flex items-center justify-center w-9 h-9 m-1 rounded-full hover:bg-gray-100 dark:hover:bg-gray-700 cursor-pointer transition-colors duration-200"
+        className="flex items-center justify-center text-2xl m-1 rounded-full hover:bg-gray-100 dark:hover:bg-gray-700 cursor-pointer transition-colors duration-200"
       >
         <FcHeadset size={24} />
       </div>

ui/src/components/template/Header.tsx

@@ -15,14 +15,8 @@ const Header = (props: HeaderProps) => {
 
   return (
     <header className={classNames('header', className)}>
-      <div
+      <div className={classNames('header-wrapper', container && 'container mx-auto')}>
-        className={classNames(
+        <div className="flex">{headerStart}</div>
-          'header-wrapper',
-          HEADER_HEIGHT_CLASS,
-          container && 'container mx-auto',
-        )}
-      >
-        <div className='flex'>{headerStart}</div>
         {headerMiddle && <div className="header-action header-action-middle">{headerMiddle}</div>}
         <div className="header-action header-action-end">{headerEnd}</div>
       </div>

ui/src/components/template/SecondaryHeader.tsx

@@ -14,9 +14,7 @@ const SecondaryHeader = (props: SecondaryHeaderProps) => {
 
   const navMode = useStoreState((state) => state.theme.navMode)
   const themeColor = useStoreState((state) => state.theme.themeColor)
-    const primaryColorLevel = useStoreState(
+  const primaryColorLevel = useStoreState((state) => state.theme.primaryColorLevel)
-        (state) => state.theme.primaryColorLevel
-    )
   const userAuthority = useStoreState((state) => state.auth.user.authority)
 
   const { larger } = useResponsive()
@@ -31,23 +29,9 @@ const SecondaryHeader = (props: SecondaryHeaderProps) => {
   return (
     <>
       {larger.md && (
-                <div
+        <div className={classNames('flex items-center py-1', headerColor(), className)}>
-                    className={classNames(
+          <div className={classNames('flex items-center px-2', contained && 'container mx-auto')}>
-                        'h-12 flex items-center',
+            <HorizontalMenuContent manuVariant={navMode} userAuthority={userAuthority} />
-                        headerColor(),
-                        className
-                    )}
-                >
-                    <div
-                        className={classNames(
-                            'flex items-center px-2',
-                            contained && 'container mx-auto'
-                        )}
-                    >
-                        <HorizontalMenuContent
-                            manuVariant={navMode}
-                            userAuthority={userAuthority}
-                        />
           </div>
         </div>
       )}

ui/src/components/template/StackedSideNav/StackedSideNavSecondary.tsx

@@ -1,13 +1,9 @@
 import Button from '@/components/ui/Button'
 import ScrollBar from '@/components/ui/ScrollBar'
 import classNames from 'classnames'
-import {
+import { HEADER_HEIGHT_CLASS, DIR_LTR, DIR_RTL } from '@/constants/theme.constant'
-    HEADER_HEIGHT_CLASS,
-    DIR_LTR,
-    DIR_RTL,
-} from '@/constants/theme.constant'
 import VerticalMenuContent from '@/components/template/VerticalMenuContent'
-import { FaArrowLeft, FaArrowRight } from 'react-icons/fa';
+import { FaArrowLeft, FaArrowRight } from 'react-icons/fa'
 import type { NavigationTree } from '@/@types/navigation'
 import type { Direction, NavMode } from '@/@types/theme'
 
@@ -42,7 +38,8 @@ const StackedSideNavSecondary = (props: StackedSideNavSecondaryProps) => {
   return (
     <div className={classNames('h-full', className)} {...rest}>
       <div
-                className={`${HEADER_HEIGHT_CLASS} flex items-center justify-between gap-4 pl-6 pr-4`}
+        // className={`${HEADER_HEIGHT_CLASS} flex items-center justify-between gap-4 pl-6 pr-4`}
+        className={'flex items-center justify-between gap-4 pl-6 pr-4'}
       >
         <h5 className="font-bold">{title}</h5>
         <Button

ui/src/views/list/useFilters.tsx

@@ -95,6 +95,8 @@ const useFilters = ({
     // Add ApplyFilterButton button filterRow.visible is true and filterRow.applyFilter is set to "onClick" ise calisir
     if (grdOpt.filterRowDto?.visible && grdOpt.filterRowDto?.applyFilter == 'onClick') {
       items.push({
+        locateInMenu: 'auto',
+        showText: 'inMenu',
         name: 'applyFilterButton',
       })
     }
@@ -155,6 +157,8 @@ const useFilters = ({
 
       if (checkPermission(gridDto?.gridOptions.permissionDto.e)) {
         items.push({
+          locateInMenu: 'auto',
+          showText: 'inMenu',
           name: 'exportButton',
         })
       }
@@ -164,6 +168,8 @@ const useFilters = ({
         location: 'after',
         widget: 'dxMenu',
         name: 'filterMenuButtons',
+        locateInMenu: 'auto',
+        showText: 'inMenu',
         options: {
           // filtre menüsündeki elemanlarin tıklama islemleri burada yönetiliyor.
           onItemClick: function (e: any) {

ui/src/views/list/useToolbar.tsx

@@ -56,6 +56,8 @@ const useToolbar = ({
     // field chooser panel
     if (grdOpt.columnOptionDto?.columnChooserEnabled) {
       items.push({
+        locateInMenu: 'auto',
+        showText: 'inMenu',
         name: 'columnChooserButton',
       })
     }
@@ -63,8 +65,9 @@ const useToolbar = ({
     // Add group panel
     if (grdOpt.groupPanelDto?.visible) {
       items.push({
+        locateInMenu: 'auto',
+        showText: 'inMenu',
         name: 'groupPanel',
-        showText: 'always',
       })
     }
 
@@ -74,6 +77,8 @@ const useToolbar = ({
       items.push({
         location: 'after',
         widget: 'dxButton',
+        locateInMenu: 'auto',
+        showText: 'inMenu',
         name: 'deleteSelectedRecords',
         options: {
           text: translate('::ListForms.ListForm.DeleteSelectedRecords'),
@@ -169,8 +174,9 @@ const useToolbar = ({
     // Add InsertNewRecord button
     if (grdOpt.editingOptionDto?.allowAdding && checkPermission(grdOpt.permissionDto?.c)) {
       items.push({
+        locateInMenu: 'auto',
+        showText: 'inMenu',
         name: 'addRowButton',
-        showText: 'always',
         location: 'after',
       })
     }
@@ -245,8 +251,9 @@ const useToolbar = ({
     // Add searchPanel
     if (grdOpt.searchPanelDto?.visible) {
       items.push({
+        locateInMenu: 'auto',
+        showText: 'inMenu',
         name: 'searchPanel',
-        showText: 'always',
       })
     }
 
@@ -257,10 +264,14 @@ const useToolbar = ({
       checkPermission(grdOpt.permissionDto?.u)
     ) {
       items.push({
+        locateInMenu: 'auto',
+        showText: 'inMenu',
         name: 'saveButton',
       })
 
       items.push({
+        locateInMenu: 'auto',
+        showText: 'inMenu',
         name: 'revertButton',
       })
     }