Fix: index obscuring document on iOS version 15

rg-wood · rg-wood · commit f5a48564598b · 2024-04-25T22:14:46.000+01:00
Media prompts to hide the index for small screens, such as on mobile,
were being ignored by Apple devices running iOS 15 or earlier. These
devices lack support for range operators, so using range prefixes
instead fixes the issue.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "vellum-doc",
-  "version": "0.4.1",
+  "version": "0.4.2",
   "description": "A simple web component",
   "main": "vellum-doc.js",
   "module": "vellum-doc.js",
diff --git a/src/vellum-doc.ts b/src/vellum-doc.ts
@@ -63,7 +63,7 @@ export class VellumDocument extends LitElement {
       );
     }
 
-    @media (width < 700px) {
+    @media (max-width: 700px) {
       #document {
         margin-left: 0;
       }

Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "vellum-doc",`
`3`		`- "version": "0.4.1",`
	`3`	`+ "version": "0.4.2",`
`4`	`4`	`"description": "A simple web component",`
`5`	`5`	`"main": "vellum-doc.js",`
`6`	`6`	`"module": "vellum-doc.js",`
Original file line number	Diff line number	Diff line change
`@@ -63,7 +63,7 @@ export class VellumDocument extends LitElement {`
`63`	`63`	`);`
`64`	`64`	`}`
`65`	`65`
`66`		`- @media (width < 700px) {`
	`66`	`+ @media (max-width: 700px) {`
`67`	`67`	`#document {`
`68`	`68`	`margin-left: 0;`
`69`	`69`	`}`