Fix Monaco IOS keyboard button (#24341)

Fix https://github.com/go-gitea/gitea/issues/16188. Turns out the
element was completely misaligned by fomantic styles. Add most of the
original styles in `!important` form to fix.

Tapping the button doesn't do anything useful in Simulator.app, but I
guess it's still better to not outright hide it in case it has a
possiblity to work.

<img width="121" alt="image"
src="https://user-images.githubusercontent.com/115237/234379685-4e67f8cd-7e91-4bcc-8e17-9d5b2ebed6cd.png">

Co-authored-by: Giteabot <teabot@gitea.io>

diff --git a/web_src/css/features/codeeditor.css b/web_src/css/features/codeeditor.css
index f7e77774094ee5e0e22514ac4eceafd5680063af..8666ad2f859265ec9338673a008e474ec2c377ff 100644 (file)
--- a/web_src/css/features/codeeditor.css
+++ b/web_src/css/features/codeeditor.css
@@ -31,3 +31,18 @@
 .monaco-scrollable-element > .scrollbar > .slider:active {
   background: var(--color-primary-dark-2) !important;
 }
+
+/* fomantic styles destroy this element only visible on IOS, restore it */
+.monaco-editor .iPadShowKeyboard {
+  border: none !important;
+  width: 58px !important;
+  min-width: 0 !important;
+  height: 36px !important;
+  min-height: 0 !important;
+  margin: 0 !important;
+  padding: 0 !important;
+  position: absolute !important;
+  resize: none !important;
+  overflow: hidden !important;
+  border-radius: 4px !important;
+}