diff --git a/UI/Base/ScrollableFullScreen.ts b/UI/Base/ScrollableFullScreen.ts
index d3e7af0..7369c63 100644
--- a/UI/Base/ScrollableFullScreen.ts
+++ b/UI/Base/ScrollableFullScreen.ts
@@ -16,17 +16,17 @@ export default class ScrollableFullScreen extends UIElement {
const returnToTheMap = Svg.back_svg().onClick(() => {
State.state.fullScreenMessage.setData(undefined);
State.state.selectedElement.setData(undefined);
- }).SetClass("only-on-mobile")
- .SetClass("featureinfobox-back-to-the-map")
+ }).SetClass("featureinfobox-back-to-the-map only-on-mobile mb-2")
title.SetClass("block w-full")
const ornament = new Combine([new Ornament().SetStyle("height:5em;")]).SetClass("only-on-mobile")
this._component = new Combine([
- new Combine([returnToTheMap, title]).SetClass("border-b-2 border-black shadow sm:shadow-none fixed sm:relative top-0 left-0 right-0 z-50 bg-white p-2 sm:p-0 flex overflow-hidden"),
- new Combine(["",content,"", ornament]).SetClass("featureinfobox-content"),
+ new Combine([returnToTheMap, title]).SetClass("border-b-2 border-black shadow sm:shadow-none fixed sm:relative top-0 left-0 right-0 z-50 bg-white p-2 pb-0 sm:p-0 flex overflow-hidden"),
+ new Combine(["", content, "", ornament])
+ .SetClass("block relative pt-16 sm:pt-4 w-full max-h-screen sm:max-h-65vh landscape:max-h-screen overflow-y-auto overflow-x-hidden"),
// We add an ornament which takes around 5em. This is in order to make sure the Web UI doesn't hide
])
- this.SetClass("featureinfobox");
+ this.SetClass("block flex flex-col");
}
diff --git a/UI/BigComponents/FullWelcomePaneWithTabs.ts b/UI/BigComponents/FullWelcomePaneWithTabs.ts
index d6e8985..ab9bea5 100644
--- a/UI/BigComponents/FullWelcomePaneWithTabs.ts
+++ b/UI/BigComponents/FullWelcomePaneWithTabs.ts
@@ -74,7 +74,7 @@ export default class FullWelcomePaneWithTabs extends UIElement {
const backButton = new Combine([
new Combine([Translations.t.general.returnToTheMap.Clone().SetClass("to-the-map")])
.SetClass("to-the-map-inner")
-
+
]).SetClass("only-on-mobile")
.onClick(() => State.state.fullScreenMessage.setData(undefined));
diff --git a/UI/FullScreenMessageBoxHandler.ts b/UI/FullScreenMessageBoxHandler.ts
index 109105b..8a8c7eb 100644
--- a/UI/FullScreenMessageBoxHandler.ts
+++ b/UI/FullScreenMessageBoxHandler.ts
@@ -20,7 +20,7 @@ export default class FullScreenMessageBox extends UIElement {
return "";
}
this._content = State.state.fullScreenMessage.data.content;
- return new Combine([this._content]).SetClass("fullscreenmessage-content").Render();
+ return new Combine([this._content]).SetClass("block max-h-screen h-screen overflow-x-hidden overflow-y-auto bg-white p-2").Render();
}
protected InnerUpdate(htmlElement: HTMLElement) {
diff --git a/css/fullscreenmessagebox.css b/css/fullscreenmessagebox.css
deleted file mode 100644
index cf527cd..0000000
--- a/css/fullscreenmessagebox.css
+++ /dev/null
@@ -1,32 +0,0 @@
-.fullscreenmessage-content {
- max-height: calc(100vh);
- height: 100%;
- overflow-y: auto;
- overflow-x: hidden;
- background-color: var(--background-color);
- display: block;
-}
-
-.fullscreenmessage-content .featureinfobox {
- padding-top: 1em;
- position: relative;
-}
-
-.fullscreenmessage-content .featureinfobox-content {
- padding: 1em;
- top: var(--variable-title-height);
- max-height: calc(100vh - var(--variable-title-height)) !important;
- min-height: calc(100vh - var(--variable-title-height)) !important;
- position: absolute;
- overflow-y: auto;
- box-sizing: border-box;
-
- display: flex;
- flex-direction: column;
- justify-content: space-between
-}
-
-.fullscreenmessage-content .featureinfobox-tail {
- /*THe ornament to give the URL bar some room...*/
-}
-
diff --git a/css/tagrendering.css b/css/tagrendering.css
index ac6c077..779a755 100644
--- a/css/tagrendering.css
+++ b/css/tagrendering.css
@@ -1,9 +1,4 @@
-.featureinfobox {
- display: flex;
- flex-direction: column;
-}
-
.featureinfobox-back-to-the-map {
padding: 0.5em;
border-radius: 999em;
@@ -25,31 +20,10 @@
stroke: var(--subtle-detail-color-contrast) !important;
}
-.featureinfobox-content {
- display: block;
- max-height: 75vh;
- overflow-y: auto;
- padding-top: 1em;
- width:100%;
- overflow-x: hidden;
-}
-
-@media only screen and (max-width: 600px), only screen and (max-height: 600px) {
- .featureinfobox-content {
- display: block;
- max-height: unset !important;
- overflow-y: auto;
- }
-}
-
@media only screen and (max-height: 600px) and (min-width: 600px) {
/* landscape mode: the first tagrendering of the infobox gets a special treatment and is placed on the right*/
- .featureinfobox-content {
- position: relative;
- width: 100% !important;
- max-width: unset !important;
- max-height: unset !important;
- height: 100vh;
+ .landscape\:max-h-screen {
+ max-height: 100vh;
}
.answer {
diff --git a/index.html b/index.html
index 00f9e5d..8450e33 100644
--- a/index.html
+++ b/index.html
@@ -14,7 +14,7 @@
-
+