Increase width sidebar

MinThaMie · MinThaMie · commit 199ae232b7aa · 2023-06-17T14:30:54.000+02:00
diff --git a/addon/styles/components/es-sidebar.css b/addon/styles/components/es-sidebar.css
@@ -9,7 +9,7 @@
   display: none;
 }
 
-@media (max-width: 768px) {
+@media (max-width: 844px) {
   .es-sidebar-toggle {
     position: fixed;
     bottom: 30px;
diff --git a/addon/styles/sidebar-container.css b/addon/styles/sidebar-container.css
@@ -1,5 +1,5 @@
 :root {
-  --sidebar-width: 16rem;
+  --sidebar-width: 18.5rem;
 }
 
 .sidebar-container {
@@ -19,7 +19,7 @@
   grid-column: 2 / span 2;
 }
 
-@media (max-width: 768px) {
+@media (max-width: 844px) {
   .sidebar-container {
     display: block;
     padding: var(--spacing-4) var(--grid-margin);
diff --git a/docs/components/sidebar.md b/docs/components/sidebar.md
@@ -4,7 +4,7 @@
 
 The sidebar component can be used together with the sidebar-container class to add a responsive sidebar to the page. If the sidebar is the first element in the sidebar-container it will display as a left sidebar. Otherwise it will display as a right sidebar.
 
-The sidebar component will automatically switch to the mobile mode once your browser window is smaller than or equal to 768px.
+The sidebar component will automatically switch to the mobile mode once your browser window is smaller than or equal to 844px.
 
 <style>
   .sidebar-container {
@@ -20,7 +20,7 @@ The sidebar component will automatically switch to the mobile mode once your bro
     background: #FFF;
   }
 
-  @media (max-width: 768px) {
+  @media (max-width: 844px) {
     .sidebar-container .es-sidebar {
       width: calc(100% - var(--es-sidebar-padding) * 2);
     }

Original file line number	Diff line number	Diff line change
`@@ -9,7 +9,7 @@`
`9`	`9`	`display: none;`
`10`	`10`	`}`
`11`	`11`
`12`		`-@media (max-width: 768px) {`
	`12`	`+@media (max-width: 844px) {`
`13`	`13`	`.es-sidebar-toggle {`
`14`	`14`	`position: fixed;`
`15`	`15`	`bottom: 30px;`
Original file line number	Diff line number	Diff line change
`@@ -1,5 +1,5 @@`
`1`	`1`	`:root {`
`2`		`- --sidebar-width: 16rem;`
	`2`	`+ --sidebar-width: 18.5rem;`
`3`	`3`	`}`
`4`	`4`
`5`	`5`	`.sidebar-container {`
`@@ -19,7 +19,7 @@`
`19`	`19`	`grid-column: 2 / span 2;`
`20`	`20`	`}`
`21`	`21`
`22`		`-@media (max-width: 768px) {`
	`22`	`+@media (max-width: 844px) {`
`23`	`23`	`.sidebar-container {`
`24`	`24`	`display: block;`
`25`	`25`	`padding: var(--spacing-4) var(--grid-margin);`
Original file line number	Diff line number	Diff line change
`@@ -4,7 +4,7 @@`
`4`	`4`
`5`	`5`	`The sidebar component can be used together with the sidebar-container class to add a responsive sidebar to the page. If the sidebar is the first element in the sidebar-container it will display as a left sidebar. Otherwise it will display as a right sidebar.`
`6`	`6`
`7`		`-The sidebar component will automatically switch to the mobile mode once your browser window is smaller than or equal to 768px.`
	`7`	`+The sidebar component will automatically switch to the mobile mode once your browser window is smaller than or equal to 844px.`
`8`	`8`
`9`	`9`	`<style>`
`10`	`10`	`.sidebar-container {`
`@@ -20,7 +20,7 @@ The sidebar component will automatically switch to the mobile mode once your bro`
`20`	`20`	`background: #FFF;`
`21`	`21`	`}`
`22`	`22`
`23`		`- @media (max-width: 768px) {`
	`23`	`+ @media (max-width: 844px) {`
`24`	`24`	`.sidebar-container .es-sidebar {`
`25`	`25`	`width: calc(100% - var(--es-sidebar-padding) * 2);`
`26`	`26`	`}`