diff --git a/src/components/FeaturePanel/Climbing/ClimbingPanel.tsx b/src/components/FeaturePanel/Climbing/ClimbingPanel.tsx
index 83aa188d6..22ab76345 100644
--- a/src/components/FeaturePanel/Climbing/ClimbingPanel.tsx
+++ b/src/components/FeaturePanel/Climbing/ClimbingPanel.tsx
@@ -37,6 +37,14 @@ const HeadingContainer = styled.div`
align-items: center;
`;
+const DetailButtonContainer = styled.div`
+ margin: 8px;
+ @supports (-webkit-touch-callout: none) {
+ /* CSS specific to iOS devices */
+ margin-bottom: 28px;
+ }
+`;
+
const ParentItem = styled.div`
margin: 12px 8px -4px 8px;
a {
@@ -145,7 +153,7 @@ export const ClimbingPanel = ({ footer, showTagsTable }) => {
{/* @TODO unite with parent panel */}
{footer}
-
+
-
+
>
);
diff --git a/src/components/FeaturePanel/Climbing/Editor/RouteNumber.tsx b/src/components/FeaturePanel/Climbing/Editor/RouteNumber.tsx
index d24897acf..0b57f5e4b 100644
--- a/src/components/FeaturePanel/Climbing/Editor/RouteNumber.tsx
+++ b/src/components/FeaturePanel/Climbing/Editor/RouteNumber.tsx
@@ -36,12 +36,12 @@ export const RouteNumber = ({ children: routeNumber, x, y }: Props) => {
setRouteIndexHovered,
} = useClimbingContext();
const digits = String(routeNumber).length;
- const RECT_WIDTH = ((digits > 2 ? digits : 0) * 3 + 20) / photoZoom.scale;
- const RECT_HEIGHT = 20 / photoZoom.scale;
- const RECT_Y_OFFSET = 10 / photoZoom.scale;
+ const RECT_WIDTH = ((digits > 2 ? digits : 0) * 3 + 18) / photoZoom.scale;
+ const RECT_HEIGHT = 18 / photoZoom.scale;
+ const RECT_Y_OFFSET = 8 / photoZoom.scale;
const OUTLINE_WIDTH = 2 / photoZoom.scale;
const HOVER_WIDTH = 10 / photoZoom.scale;
- const TEXT_Y_SHIFT = 15 / photoZoom.scale;
+ const TEXT_Y_SHIFT = 13 / photoZoom.scale;
const getX = () => {
const isFarRight = x + RECT_WIDTH / 2 + OUTLINE_WIDTH > imageSize.width;
diff --git a/src/components/FeaturePanel/Climbing/RouteNumber.tsx b/src/components/FeaturePanel/Climbing/RouteNumber.tsx
index 65b8907e3..75714f3f9 100644
--- a/src/components/FeaturePanel/Climbing/RouteNumber.tsx
+++ b/src/components/FeaturePanel/Climbing/RouteNumber.tsx
@@ -7,8 +7,8 @@ import { useRouteNumberColors } from './utils/useRouteNumberColors';
const Container = styled.div<{
colors: Record;
}>`
- width: 22px;
- height: 22px;
+ width: 20px;
+ height: 20px;
line-height: 20px;
border-radius: 50%;
background: ${({ colors }) => colors.background};
diff --git a/src/components/FeaturePanel/Climbing/utils/useScrollShadow.tsx b/src/components/FeaturePanel/Climbing/utils/useScrollShadow.tsx
index bb6091bf7..6367fa008 100644
--- a/src/components/FeaturePanel/Climbing/utils/useScrollShadow.tsx
+++ b/src/components/FeaturePanel/Climbing/utils/useScrollShadow.tsx
@@ -52,7 +52,7 @@ export const useScrollShadow = (deps = []) => {
const { scrollTop, scrollHeight, clientHeight } =
(scrollElementRef.current as any)?.view ?? scrollElementRef.current; // hack because of react-custom-scroll
- setIsScrolledToTop(scrollTop === 0);
+ setIsScrolledToTop(scrollTop <= 0);
setIsScrolledToBottom(
Math.ceil(scrollTop + clientHeight) >= scrollHeight,
);