increase width of notifications to 100% on mobile devices

homebridge · Sep 13, 2024 · 70d6b18 · 70d6b18
1 parent 1bba2b2
commit 70d6b18
Show file tree

Hide file tree

Showing 4 changed files with 32 additions and 8 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -10,6 +10,7 @@ All notable changes to `homebridge-config-ui-x` will be documented in this file.
   - this can be configured in the child bridge modal
   - the general `Homebridge Debug Mode` now only applies to the main Homebridge bridge
   - this feature requires Homebridge `v2.0.0-beta.21` or later
+- increase width of notifications to `100%` on mobile devices
 
 ### Other Changes
 

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -118,7 +118,6 @@
     "tail": "2.2.6",
     "tar": "6.2.1",
     "tcp-port-used": "1.0.2",
-    "unplugin-swc": "^1.5.1",
     "unzipper": "0.12.3"
   },
   "devDependencies": {
@@ -145,6 +144,7 @@
     "ts-node": "^10.9.2",
     "tsconfig-paths": "^4.2.0",
     "typescript": "^5.6.2",
+    "unplugin-swc": "^1.5.1",
     "vitest": "^2.1.1"
   },
   "overrides": {

diff --git a/ui/src/scss/components/toastr.scss b/ui/src/scss/components/toastr.scss
@@ -1,9 +1,10 @@
 @import 'ngx-toastr/toastr';
 
-/* TOASTR BUGFIX */
-/* https://github.com/scttcper/ngx-toastr/issues/605 */
-#toast-container > div {
-  opacity: 1;
+@media (max-width: 575px) {
+  #toast-container > div {
+    width: calc(100% - 12px);
+    left: 12px;
+  }
 }
 
 .toast {