From 0e62e27c64787b93d726773da11092f0dad73d8f Mon Sep 17 00:00:00 2001
From: Winston Sung <winston21.sung@gmail.com>
Date: Mon, 29 Apr 2024 11:59:03 +0800
Subject: [PATCH] Fix too-wide sidebar in narrow screen

Causing cannot tap-to-close.

min-width: max-content; would cause the sidebar
won't wrap texts in narrow screens.

Also fix the sidebar became too narrow if the
texts in sidebar are too short.

Bug: #38
Change-Id: I1272edf8fc488160eb717e40ad75fa3ecf432ace
---
 RELEASE-NOTES-1.2.md | 68 ++++++++++++++++++++++++++++++++++++++++++++
 resources/skin.less  |  6 ++--
 2 files changed, 71 insertions(+), 3 deletions(-)

diff --git a/RELEASE-NOTES-1.2.md b/RELEASE-NOTES-1.2.md
index 4a8c0ad..e128c73 100644
--- a/RELEASE-NOTES-1.2.md
+++ b/RELEASE-NOTES-1.2.md
@@ -1,5 +1,73 @@
 # mediawiki-skins-Lakeus 1.2
 
+## mediawiki-skins-Lakeus master branch
+
+THIS IS NOT A RELEASE YET
+
+The `master` branch is an alpha-quality development branch. Use it at your own
+risk!
+
+### Configuration changes for system administrators
+
+#### New configuration
+
+* …
+
+#### Changed configuration
+
+* …
+
+#### Removed configuration
+
+* …
+
+### New user-facing features
+
+* …
+
+### New features for sysadmins
+
+* …
+
+### New developer features
+
+* …
+
+### Bug fixes
+
+* (issue #38) Fixed too-wide sidebar in narrow screen, causing cannot
+  tap-to-close.
+* (issue #38) Fixed the sidebar became too narrow if the texts in sidebar are
+  too short.
+
+### Action API changes
+
+* …
+
+### Action API internal changes
+
+* …
+
+### Languages updated
+
+Lakeus skin now supports 27 languages. Many localisations are updated regularly.
+
+Below only new and removed languages are listed.
+
+* …
+
+### Breaking changes
+
+* …
+
+### Deprecations
+
+* …
+
+### Other changes
+
+* …
+
 ## mediawiki-skins-Lakeus 1.2.0
 
 This is the first release of the mediawiki-skins-Lakeus 1.2 version.
diff --git a/resources/skin.less b/resources/skin.less
index ecc50d3..cf98931 100644
--- a/resources/skin.less
+++ b/resources/skin.less
@@ -369,14 +369,14 @@ p {
   position: fixed;
   left: 0;
   top: 0;
-  width: 30%;
+  width: max-content;
   bottom: 0;
   background: @background-color-toggle-list;
   z-index: 13;
   height: 100%;
   overflow-y: auto;
-  min-width: max-content;
-  max-width: 500px;
+  min-width: ~"max( 224px, 30% )";
+  max-width: ~"min( calc( 100% - 80px ), 500px )";
   transform: translateX( -100% );
   transition: cubic-bezier( 0.4, 0, 0.2, 1 ) 0.2s transform;