fix(FilterBar & VariantManagement): fix tablet device detection (#5571)

Fixes #5541
SAP · Mar 5, 2024 · 8d55d0f · 8d55d0f
1 parent e6d39b6
commit 8d55d0f
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 3 deletions.
diff --git a/packages/main/src/components/FilterBar/index.tsx b/packages/main/src/components/FilterBar/index.tsx
@@ -36,6 +36,7 @@ import { filterValue, renderSearchWithValue, syncRef } from './utils.js';
 
 const isPhone = Device.isPhone();
 const isTablet = Device.isTablet();
+const isDesktop = Device.isDesktop();
 
 export interface FilterBarPropTypes extends CommonProps {
   /**
@@ -253,7 +254,8 @@ const FilterBar = forwardRef<HTMLDivElement, FilterBarPropTypes>((props, ref) =>
       if (filterBarCollapsed !== undefined) {
         return filterBarCollapsed;
       }
-      return !isTablet;
+      // isTablet is true for some desktops with touch screens
+      return !(isTablet && !isDesktop);
     }
     return true;
   })();

diff --git a/packages/main/src/components/VariantManagement/ManageViewsDialog.tsx b/packages/main/src/components/VariantManagement/ManageViewsDialog.tsx
@@ -1,4 +1,4 @@
-import { isPhone, isTablet } from '@ui5/webcomponents-base/dist/Device.js';
+import { isDesktop, isPhone, isTablet } from '@ui5/webcomponents-base/dist/Device.js';
 import searchIcon from '@ui5/webcomponents-icons/dist/search.js';
 import {
   enrichEventWithDetails,
@@ -41,7 +41,8 @@ const _popupHeaderFontFamily = `var(${cssVarVersionInfoPrefix}popup_header_font_
 
 const styles = {
   manageViewsDialog: {
-    width: isPhone() || isTablet() ? '100%' : '70vw',
+    // isTablet is true for some desktops with touch screens
+    width: isPhone() || (isTablet() && !isDesktop()) ? '100%' : '70vw',
     '&::part(content), &::part(header)': {
       padding: 0
     },