diff --git a/packages/grafana-ui/src/components/RefreshPicker/_RefreshPicker.scss b/packages/grafana-ui/src/components/RefreshPicker/_RefreshPicker.scss
index 7d922324dc5..bfa67d87582 100644
--- a/packages/grafana-ui/src/components/RefreshPicker/_RefreshPicker.scss
+++ b/packages/grafana-ui/src/components/RefreshPicker/_RefreshPicker.scss
@@ -30,7 +30,7 @@
}
}
- @include media-breakpoint-up(md) {
+ @include media-breakpoint-up(sm) {
display: block;
}
}
diff --git a/packages/grafana-ui/src/components/ThresholdsEditor/__snapshots__/ThresholdsEditor.test.tsx.snap b/packages/grafana-ui/src/components/ThresholdsEditor/__snapshots__/ThresholdsEditor.test.tsx.snap
index 09596e066dd..faa59ddb046 100644
--- a/packages/grafana-ui/src/components/ThresholdsEditor/__snapshots__/ThresholdsEditor.test.tsx.snap
+++ b/packages/grafana-ui/src/components/ThresholdsEditor/__snapshots__/ThresholdsEditor.test.tsx.snap
@@ -109,7 +109,7 @@ exports[`Render should render with base threshold 1`] = `
},
"breakpoints": Object {
"lg": "992px",
- "md": "768px",
+ "md": "769px",
"sm": "544px",
"xl": "1200px",
"xs": "0",
@@ -272,7 +272,7 @@ exports[`Render should render with base threshold 1`] = `
},
"breakpoints": Object {
"lg": "992px",
- "md": "768px",
+ "md": "769px",
"sm": "544px",
"xl": "1200px",
"xs": "0",
diff --git a/packages/grafana-ui/src/themes/default.ts b/packages/grafana-ui/src/themes/default.ts
index dadaa2769ef..4a0e42312b7 100644
--- a/packages/grafana-ui/src/themes/default.ts
+++ b/packages/grafana-ui/src/themes/default.ts
@@ -42,7 +42,7 @@ const theme: GrafanaThemeCommons = {
breakpoints: {
xs: '0',
sm: '544px',
- md: '768px',
+ md: '769px', // 1 more than regular ipad in portrait
lg: '992px',
xl: '1200px',
},
diff --git a/public/app/features/explore/ExploreToolbar.tsx b/public/app/features/explore/ExploreToolbar.tsx
index 4222b000eb9..0ee34958f4f 100644
--- a/public/app/features/explore/ExploreToolbar.tsx
+++ b/public/app/features/explore/ExploreToolbar.tsx
@@ -38,9 +38,9 @@ const createResponsiveButton = (options: {
return (
);
};
@@ -172,7 +172,7 @@ export class UnConnectedExploreToolbar extends PureComponent {
-
diff --git a/public/sass/_variables.generated.scss b/public/sass/_variables.generated.scss
index 16277534f2b..510e5649974 100644
--- a/public/sass/_variables.generated.scss
+++ b/public/sass/_variables.generated.scss
@@ -67,7 +67,7 @@ $spacers: (
$grid-breakpoints: (
xs: 0,
sm: 544px,
- md: 768px,
+ md: 769px,
lg: 992px,
xl: 1200px,
) !default;
diff --git a/public/sass/components/_navbar.scss b/public/sass/components/_navbar.scss
index 0128defe161..8c950f72859 100644
--- a/public/sass/components/_navbar.scss
+++ b/public/sass/components/_navbar.scss
@@ -9,6 +9,11 @@
transition-duration: 350ms;
transition-timing-function: ease-in-out;
transition-property: box-shadow, border-bottom;
+
+ @include media-breakpoint-up(md) {
+ padding-left: $dashboard-padding;
+ margin-left: 0;
+ }
}
@mixin navbar-alt-look() {
@@ -75,13 +80,18 @@
opacity: 0.75;
margin-right: 10px;
display: none;
+
+ @include media-breakpoint-up(md) {
+ display: inline-block;
+ }
}
&--folder {
color: $text-color-weak;
+ display: none;
- @include media-breakpoint-down(md) {
- display: none;
+ @include media-breakpoint-up(lg) {
+ display: inline-block;
}
}
}
@@ -170,17 +180,11 @@
&--secondary {
@include buttonBackground($btn-secondary-bg, $btn-secondary-bg-hl);
}
-}
-@include media-breakpoint-up(sm) {
- .navbar {
- padding-left: 20px;
- margin-left: 0;
- }
-
- .navbar-page-btn {
- .gicon {
- display: inline-block;
+ @include media-breakpoint-down(lg) {
+ .btn-title {
+ margin-left: $space-xs;
+ display: none;
}
}
}
diff --git a/public/sass/components/_search.scss b/public/sass/components/_search.scss
index 0e800892619..196075d20b5 100644
--- a/public/sass/components/_search.scss
+++ b/public/sass/components/_search.scss
@@ -262,7 +262,7 @@
background: $panel-bg;
}
-@include media-breakpoint-up(sm) {
+@include media-breakpoint-up(md) {
.search-container {
left: $side-menu-width;
}
diff --git a/public/sass/components/_sidemenu.scss b/public/sass/components/_sidemenu.scss
index 7e68ed8d341..334378036c3 100644
--- a/public/sass/components/_sidemenu.scss
+++ b/public/sass/components/_sidemenu.scss
@@ -1,3 +1,5 @@
+$mobile-menu-breakpoint: md;
+
.sidemenu {
position: fixed;
display: flex;
@@ -17,7 +19,7 @@
display: none;
}
- @include media-breakpoint-up(sm) {
+ @include media-breakpoint-up($mobile-menu-breakpoint) {
background: $side-menu-bg;
height: auto;
box-shadow: $side-menu-shadow;
@@ -46,7 +48,7 @@
.sidemenu__bottom {
display: none;
- @include media-breakpoint-up(sm) {
+ @include media-breakpoint-up($mobile-menu-breakpoint) {
display: block;
}
}
@@ -55,7 +57,7 @@
position: relative;
@include left-brand-border();
- @include media-breakpoint-up(sm) {
+ @include media-breakpoint-up($mobile-menu-breakpoint) {
&.active,
&:hover {
background-color: $side-menu-item-hover-bg;
@@ -214,10 +216,10 @@ li.sidemenu-org-switcher {
}
}
-@include media-breakpoint-down(xs) {
+@include media-breakpoint-down(sm) {
.sidemenu-open--xs {
li {
- font-size: $font-size-lg;
+ font-size: $font-size-md;
}
.sidemenu {
@@ -283,7 +285,6 @@ li.sidemenu-org-switcher {
position: unset;
width: 100%;
float: none;
- margin-top: $space-sm;
margin-bottom: $space-sm;
> li > a {
diff --git a/public/sass/pages/_explore.scss b/public/sass/pages/_explore.scss
index c7bea01df4c..fd0a14193ab 100644
--- a/public/sass/pages/_explore.scss
+++ b/public/sass/pages/_explore.scss
@@ -31,11 +31,15 @@
flex-flow: row wrap;
justify-content: flex-start;
height: auto;
- padding: 0 $dashboard-padding;
+ padding: 0 $dashboard-padding 0 50px;
border-bottom: 1px solid #0000;
transition-duration: 0.35s;
transition-timing-function: ease-in-out;
transition-property: box-shadow, border-bottom;
+
+ @include media-breakpoint-up(md) {
+ padding-left: $dashboard-padding;
+ }
}
.explore-toolbar-item {
@@ -65,11 +69,6 @@
font-size: 18px;
min-height: 55px;
line-height: 55px;
- justify-content: space-between;
- margin-left: $space-xl;
-}
-
-.explore-toolbar-header {
justify-content: space-between;
align-items: center;
}
@@ -126,12 +125,6 @@
}
}
-@media only screen and (max-width: 803px) {
- .btn-title {
- display: none;
- }
-}
-
@media only screen and (max-width: 702px) {
.explore-toolbar-content-item:first-child {
padding-left: 2px;
@@ -139,14 +132,6 @@
}
}
-@media only screen and (max-width: 544px) {
- .explore-toolbar-header-title {
- .navbar-page-btn {
- margin-left: $dashboard-padding;
- }
- }
-}
-
.explore {
flex: 1 1 auto;
}