@sumaris-net/ngx-components 1.18.4 → 1.18.5

package/doc/changelog.md

@@ -282,3 +282,6 @@
 # 1.18.4
 [fix] Autocomplete: fix search in mobile searchbar
 [enh] Material field components: allow to set 'required' as empty tag, and not only '[required]=true'
+
+# 1.18.4
+[fix] Autocomplete: fix panel width, on small screens

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@sumaris-net/ngx-components",
   "description": "SUMARiS Angular components",
-  "version": "1.18.4",
+  "version": "1.18.5",
   "author": "contact@e-is.pro",
   "license": "AGPL-3.0",
   "readmeFilename": "README.md",

package/src/theme/_ngx-components.scss

@@ -280,13 +280,13 @@ mat-option:not(:last-of-type) {
 
 .mat-select-panel {
   --min-width: 200px;
-  --max-width: 100%;
+  --max-width: calc(min(100%, 100vw - 64px));
   min-width: var(--min-width) !important;
   max-width: var(--max-width) !important;
 }
 .mat-autocomplete-panel {
   --min-width: 250px;
-  --max-width: 100%;
+  --max-width: calc(min(100%, 100vw - 64px));
   min-width: var(--min-width) !important;
   max-width: var(--max-width) !important;
   width: var(--max-width) !important;
@@ -316,10 +316,10 @@ mat-option:not(:last-of-type) {
 
 .mat-autocomplete-panel-full-size .mat-autocomplete-panel,
 .mat-autocomplete-panel-full-size.mat-autocomplete-panel {
-  --min-width: calc(100vw - 5px);
-  --max-width: calc(100vw - 5px);
+  --min-width: calc(100vw - 64px);
+  --max-width: calc(100vw - 64px);
   position: fixed;
-  left: 0;
+  left: 32px;
 }
 
 .mat-select-panel,