Updated ui.

src/components/FeaturePanel/ImageSection/FeatureImage.tsx

@@ -38,11 +38,9 @@ const Wrapper = styled.div`
 `;
 
 const Bottom = styled.div`
-  position: absolute;
-  bottom: 0;
   display: flex;
   align-items: center;
-  width: 100%;
+  flex: 1;
   height: 44px;
 `;
 
@@ -61,22 +59,26 @@ const IconWrapper = styled.div`
 `;
 
 const AttributionLink = styled.a`
-  position: absolute;
-  right: 1px;
-  top: 1px;
   text-align: right;
   padding-right: 3px;
   font-size: 80%;
   text-shadow: 1px 1px 4px rgba(0, 0, 0, 1);
   color: #fff;
   text-decoration: none;
+  align-self: flex-end;
   opacity: ${({ portrait }) => (portrait ? 1 : 0.8)};
-
+  flex: 0;
   &:hover {
     opacity: 1;
     text-shadow: 1px 1px 10px rgba(0, 0, 0, 1), 0 0 4px rgba(0, 0, 0, 1);
   }
 `;
+const AttributionAndBottomWrapper = styled.div`
+  position: absolute;
+  bottom: 0;
+  width: 100%;
+  display: flex;
+`;
 
 interface Props {
   feature: Feature;
@@ -116,20 +118,22 @@ export const FeatureImage = ({ feature, ico, children }: Props) => {
           <img src={`/icons/${ico}_11.svg`} alt={ico} title={ico} />
         </IconWrapper>
       )}
-      {source && (
-        <Tooltip title={nl2br(`© ${attribution}${uncertainTitle}`)} arrow>
-          <AttributionLink
-            href={link}
-            target="_blank"
-            rel="noopener"
-            portrait={portrait}
-          >
-            {attribution}
-          </AttributionLink>
-        </Tooltip>
-      )}
       {!feature.skeleton && image === LOADING && <InlineSpinner />}
-      <Bottom>{children}</Bottom>
+      <AttributionAndBottomWrapper>
+        <Bottom>{children}</Bottom>
+        {source && (
+          <Tooltip title={nl2br(`© ${attribution}${uncertainTitle}`)} arrow>
+            <AttributionLink
+              href={link}
+              target="_blank"
+              rel="noopener"
+              portrait={portrait}
+            >
+              {attribution}
+            </AttributionLink>
+          </Tooltip>
+        )}
+      </AttributionAndBottomWrapper>
     </Wrapper>
   );
 };

src/components/HomepagePanel/HomepagePanel.tsx

@@ -53,6 +53,14 @@ const Center = styled.div`
   ${({ mb }) => mb && 'margin-bottom: 2em;'}
   ${({ mt }) => mt && 'margin-top: 2em;'}
 `;
+const ButtonWrapper = styled.div`
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  position: sticky;
+  top: 0px;
+  right: 0px;
+`;
 
 const Spacer = styled.div`
   padding-bottom: 2em;
@@ -74,7 +82,9 @@ export const HomepagePanel = () => {
   return (
     <PanelWrapper>
       <PanelScrollbars>
-        <ClosePanelButton right onClick={persistHideHomepage} />
+        <ButtonWrapper>
+          <ClosePanelButton onClick={persistHideHomepage} />
+        </ButtonWrapper>
         <Content>
           <div>
             <Center mb>

src/components/SearchBox/SearchBox.tsx

@@ -11,32 +11,34 @@ 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;
-  box-shadow: 0 10px 20px 0 rgba(0, 0, 0, 0.12);
-  background-color: ${({ theme }) => theme.palette.background.searchBox};
-  padding: 10px;
+  padding: 12px;
   box-sizing: border-box;
-
   z-index: 1200;
-
+  @media ${isMobile} {
+    background-color: ${({ theme }) => theme.palette.background.searchBox};
+    height: 68px;
+    padding: 8px;
+  }
   width: 100%;
   @media ${isDesktop} {
-    width: 410px;
+    width: 434px;
   }
 `;
 
 const StyledPaper = styled(Paper)`
   padding: 2px 4px;
   display: flex;
   align-items: center;
-
+  overflow: hidden;
   .MuiAutocomplete-root {
     flex: 1;
   }
+  border-radius: 8px !important;
 `;
 
 const SearchIconButton = styled(IconButton)`
@@ -87,7 +89,7 @@ const SearchBox = () => {
 
   return (
     <TopPanel>
-      <StyledPaper elevation={1} ref={autocompleteRef}>
+      <StyledPaper elevation={3} ref={autocompleteRef}>
         <SearchIconButton disabled aria-label={t('searchbox.placeholder')}>
           <SearchIcon />
         </SearchIconButton>

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)';

src/components/utils/PanelHelpers.tsx

@@ -1,24 +1,41 @@
 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
 // maybe https://github.com/malte-wessel/react-custom-scrollbars (larger)
 export const PanelWrapper = styled.div`
   position: absolute;
-  left: 0;
+  left: 12px;
+  @media ${isMobile} {
+    left: 0px;
+  }
   top: 72px; // TopPanel
-  bottom: 0;
+  @media ${isMobile} {
+    top: 68px;
+  }
+
+  bottom: 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: 100%;
+  @media ${isMobile} {
+    width: 100%;
+  }
   @media ${isDesktop} {
     width: 410px;
   }

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ę',