diff --git a/src/components/SearchBox/SearchBox.tsx b/src/components/SearchBox/SearchBox.tsx
index 98a788bd..94def512 100644
--- a/src/components/SearchBox/SearchBox.tsx
+++ b/src/components/SearchBox/SearchBox.tsx
@@ -11,16 +11,19 @@ import { useFeatureContext } from '../utils/FeatureContext';
import { AutocompleteInput } from './AutocompleteInput';
import { t } from '../../services/intl';
import { ClosePanelButton } from '../utils/ClosePanelButton';
-import { isDesktop, useMobileMode } from '../helpers';
+import { isDesktop, useMobileMode, isMobile } from '../helpers';
const TopPanel = styled.div`
position: absolute;
height: 72px;
padding: 12px;
box-sizing: border-box;
- border-radius: 30px;
z-index: 1200;
-
+ @media ${isMobile} {
+ background-color: ${({ theme }) => theme.palette.background.searchBox};
+ height: 68px;
+ padding: 8px;
+ }
width: 100%;
@media ${isDesktop} {
width: 434px;
diff --git a/src/components/helpers.tsx b/src/components/helpers.tsx
index c7fe6951..26467ae1 100644
--- a/src/components/helpers.tsx
+++ b/src/components/helpers.tsx
@@ -92,3 +92,6 @@ export const useMobileMode = () => useMediaQuery('(max-width: 700px)');
// (>= mobile size) This changes just the app layout
export const isDesktop = '(min-width: 500px)';
+
+// (<= mobile size) This changes just the app layout (revesed variable from above)
+export const isMobile = '(max-width: 500px)';
diff --git a/src/components/utils/ClosePanelButton.tsx b/src/components/utils/ClosePanelButton.tsx
index 8cd6993f..e72d4cf2 100644
--- a/src/components/utils/ClosePanelButton.tsx
+++ b/src/components/utils/ClosePanelButton.tsx
@@ -3,12 +3,11 @@ import CloseIcon from '@material-ui/icons/Close';
import React from 'react';
import { t } from '../../services/intl';
-export const ClosePanelButton = ({ onClick, right = false, style = {} }) => (
+export const ClosePanelButton = ({ onClick, style = {} }) => (
diff --git a/src/components/utils/PanelHelpers.tsx b/src/components/utils/PanelHelpers.tsx
index 28e2bf16..8f3f658e 100644
--- a/src/components/utils/PanelHelpers.tsx
+++ b/src/components/utils/PanelHelpers.tsx
@@ -1,7 +1,7 @@
import React from 'react';
import styled from 'styled-components';
import { Scrollbars } from 'react-custom-scrollbars';
-import { isDesktop } from '../helpers';
+import { isDesktop, isMobile } from '../helpers';
// custom scrollbar
// better: https://github.com/rommguy/react-custom-scroll
@@ -9,17 +9,33 @@ import { isDesktop } from '../helpers';
export const PanelWrapper = styled.div`
position: absolute;
left: 12px;
+ @media ${isMobile} {
+ left: 0px;
+ }
top: 72px; // TopPanel
+ @media ${isMobile} {
+ top: 68px;
+ }
+
bottom: 12px;
- border-radius: 12px;
+ @media ${isMobile} {
+ bottom: 0px;
+ }
+ @media ${isDesktop} {
+ border-radius: 12px;
+ // height: calc(100vh - 72px - 12px - 24px);
+ border: 1px solid ${({ theme }) => theme.palette.divider};
+ }
+
background: ${({ theme }) => theme.palette.panelBackground};
overflow: hidden;
z-index: 1100;
display: flex;
flex-direction: column;
-
- width: calc(100% - 24px);
+ @media ${isMobile} {
+ width: 100%;
+ }
@media ${isDesktop} {
width: 410px;
}
diff --git a/src/locales/pl.js b/src/locales/pl.js
index 1cf90ee3..8dce9668 100644
--- a/src/locales/pl.js
+++ b/src/locales/pl.js
@@ -139,7 +139,7 @@ export default {
'tags.phone': 'Telefon',
'tags.opening_hours': 'Godziny otwarcia',
- 'layerswitcher.button': 'Mapy',
+ 'layerswitcher.button': 'Warstwy',
'layerswitcher.heading': 'Warstwy mapy',
'layerswitcher.intro': 'Dzięki temu, że OpenStreetMap oferuje dane źródłowe, każdy może stworzyć różne warianty mapy.',
'layerswitcher.add_layer_button': 'Dodaj własną warstwę',