diff --git a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/toolbar/toolbar-panel-buttons/toolbar-panel-buttons.component.ts b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/toolbar/toolbar-panel-buttons/toolbar-panel-buttons.component.ts
index c9a2c951..aa68a9b8 100644
--- a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/toolbar/toolbar-panel-buttons/toolbar-panel-buttons.component.ts
+++ b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/toolbar/toolbar-panel-buttons/toolbar-panel-buttons.component.ts
@@ -33,7 +33,7 @@ export class ToolbarPanelButtonsComponent {
// Computed property to determine if we should show collapsed menu
get shouldShowCollapsed(): boolean {
- return this.viewportService.isMobileView() || this.viewportService.isTabletDown();
+ return this.viewportService.isMobileView()
}
// Get count of visible buttons
diff --git a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/toolbar/toolbar.component.scss b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/toolbar/toolbar.component.scss
index 18464795..6dd15b65 100644
--- a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/toolbar/toolbar.component.scss
+++ b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/toolbar/toolbar.component.scss
@@ -44,6 +44,10 @@
display: flex;
justify-content: flex-end;
align-items: center;
+
+ ov-toolbar-panel-buttons {
+ display: contents;
+ }
}
::ng-deep .menu-buttons-container:has(.collapsed-menu-container) {
flex: 0;
diff --git a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/services/viewport/viewport.service.ts b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/services/viewport/viewport.service.ts
index ab5b8e45..af2b9d7b 100644
--- a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/services/viewport/viewport.service.ts
+++ b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/services/viewport/viewport.service.ts
@@ -35,22 +35,22 @@ export class ViewportService implements OnDestroy {
// ==== PUBLIC REACTIVE SIGNALS ====
/**
- * Current viewport width (reactive)
+ * Current viewport width
*/
readonly width = this._width.asReadonly();
/**
- * Current viewport height (reactive)
+ * Current viewport height
*/
readonly height = this._height.asReadonly();
/**
- * Whether device supports touch interactions (reactive)
+ * Whether device supports touch interactions
*/
readonly isTouchDevice = computed(() => this.platform.isTouchDevice());
/**
- * Current viewport size category (computed)
+ * Current viewport size category
*/
readonly viewportSize = computed(() => {
const width = this._width();
@@ -68,47 +68,47 @@ export class ViewportService implements OnDestroy {
});
/**
- * Whether current viewport is mobile size (computed)
+ * Whether current viewport is mobile size
*/
- readonly isMobile = computed(() => this.viewportSize() === 'mobile');
+ readonly isMobile = computed(() => this.viewportSize() === 'mobile' && this.platform.isTouchDevice());
/**
- * Whether current viewport is tablet size (computed)
+ * Whether current viewport is tablet size
*/
- readonly isTablet = computed(() => this.viewportSize() === 'tablet');
+ readonly isTablet = computed(() => this.viewportSize() === 'tablet' && this.platform.isTouchDevice());
/**
- * Whether current viewport is desktop size (computed)
+ * Whether current viewport is desktop size
*/
readonly isDesktop = computed(() => this.viewportSize() === 'desktop');
/**
- * Whether current viewport is wide desktop size (computed)
+ * Whether current viewport is wide desktop size
*/
readonly isWide = computed(() => this.viewportSize() === 'wide');
/**
- * Whether current viewport is mobile or smaller (computed)
+ * Whether current viewport is mobile or smaller
*/
readonly isMobileView = computed(() => this._width() < this.BREAKPOINTS.tablet);
/**
- * Whether current viewport is tablet or smaller (computed)
+ * Whether current viewport is tablet or smaller
*/
readonly isTabletDown = computed(() => this._width() < this.BREAKPOINTS.desktop);
/**
- * Whether current viewport is tablet or larger (computed)
+ * Whether current viewport is tablet or larger
*/
readonly isTabletUp = computed(() => this._width() >= this.BREAKPOINTS.tablet);
/**
- * Whether current viewport is desktop or larger (computed)
+ * Whether current viewport is desktop or larger
*/
readonly isDesktopUp = computed(() => this._width() >= this.BREAKPOINTS.desktop);
/**
- * Complete viewport information (computed)
+ * Complete viewport information
*/
readonly viewportInfo = computed(() => ({
width: this._width(),