From 1083f54d111f7095565af6c4f08e8865c904ec95 Mon Sep 17 00:00:00 2001
From: Alexander Bulychev <git@bulychev.pro>
Date: Tue, 31 Oct 2023 14:37:09 +0400
Subject: [PATCH] FileManager: set custom DropDown width for Material and
 Fluent themes (#25915)

Co-authored-by: Alexander Bulychev <git@bulychev.net>
---
 .../js/ui/file_manager/ui.file_manager.toolbar.js  | 14 +++++++++++---
 1 file changed, 11 insertions(+), 3 deletions(-)

diff --git a/packages/devextreme/js/ui/file_manager/ui.file_manager.toolbar.js b/packages/devextreme/js/ui/file_manager/ui.file_manager.toolbar.js
index c05ac128385d..59d87bb01862 100644
--- a/packages/devextreme/js/ui/file_manager/ui.file_manager.toolbar.js
+++ b/packages/devextreme/js/ui/file_manager/ui.file_manager.toolbar.js
@@ -5,6 +5,7 @@ import { isDefined, isString } from '../../core/utils/type';
 import { ensureDefined } from '../../core/utils/common';
 import messageLocalization from '../../localization/message';
 import { extendAttributes } from './ui.file_manager.common';
+import { isCompact, isFluent, isMaterial } from '../themes';
 
 import Widget from '../widget/ui.widget';
 import Toolbar from '../toolbar';
@@ -376,6 +377,15 @@ class FileManagerToolbar extends Widget {
         });
 
         const selectedIndex = this.option('itemViewMode') === 'thumbnails' ? 1 : 0;
+        const dropDownOptions = {
+            container: this._$viewSwitcherPopup
+        };
+
+        if(isMaterial()) {
+            dropDownOptions.width = isCompact() ? 28 : 36;
+        } else if(isFluent()) {
+            dropDownOptions.width = isCompact() ? 34 : 40;
+        }
 
         return {
             cssClass: FILE_MANAGER_TOOLBAR_VIEWMODE_ITEM_CLASS,
@@ -389,9 +399,7 @@ class FileManagerToolbar extends Widget {
                 stylingMode: 'text',
                 showArrowIcon: false,
                 useSelectMode: true,
-                dropDownOptions: {
-                    container: this._$viewSwitcherPopup
-                },
+                dropDownOptions,
                 onItemClick: e => this._executeCommand(e.itemData.name)
             }
         };