From 4cb51cb9854fa0fe5171b50eb2ba0cc38fee0851 Mon Sep 17 00:00:00 2001
From: Rafael Heard <rafael.heard@gmail.com>
Date: Sat, 30 Sep 2023 05:30:44 -0400
Subject: [PATCH] Absolute positioned checkboxes  overlay floated elements
 (#26870)

Currently, checkboxes are positioned as absolute. This positioning
causes the input to overlay an element that has been floated within the
editor. Floated elements are useful if you want your text to wrap around
this element. This PR fixes the overlaying of checkboxes by removing the
absolute positioning, updating the `ul` padding, and
displaying`.task-list-item` `flex` to ensure inputs and the associated
label are on the same line.

Screenshots:

Before:
<img width="762" alt="Screenshot 2023-09-01 at 3 40 59 PM"
src="https://github.com/go-gitea/gitea/assets/6152817/570247c7-7f5c-4697-bfc9-ad4655e37991">

After:
<img width="762" alt="Screenshot 2023-09-01 at 3 42 20 PM"
src="https://github.com/go-gitea/gitea/assets/6152817/db53df45-1294-4eee-84c0-b21ac4fdf805">

---------

Co-authored-by: rafh <rafaelheard@gmail.com>
---
 web_src/css/markup/content.css | 26 ++++++++++++++++----------
 1 file changed, 16 insertions(+), 10 deletions(-)

diff --git a/web_src/css/markup/content.css b/web_src/css/markup/content.css
index 59b34b7dd7..caefa1605c 100644
--- a/web_src/css/markup/content.css
+++ b/web_src/css/markup/content.css
@@ -155,23 +155,29 @@
 
 .markup .task-list-item {
   list-style-type: none;
-  position: relative;
-  line-height: 1.5rem;
-  min-height: 1.5rem; /* // to render a checkbox list without content `- [ ]`, we need this min-height to make sure the <li> can be visible */
+}
+
+.markup .task-list-item p + ul {
+  margin-top: 16px;
 }
 
 .markup .task-list-item input[type="checkbox"] {
-  position: absolute;
-  top: 0.25em;
-  left: -1.6em;
+  margin: 0 .3em .25em -1.4em;
+  vertical-align: middle;
+  padding: 0;
 }
 
-.markup .task-list-item p {
-  line-height: 1.5rem;
+.markup .task-list-item input[type="checkbox"] + p {
+  margin-left: -0.2em;
+  display: inline;
+}
+
+.markup .task-list-item > p {
+  margin-inline: 16px;
 }
 
 .markup .task-list-item + .task-list-item {
-  margin-top: 3px;
+  margin-top: 4px;
 }
 
 .markup input[type="checkbox"] {
@@ -327,7 +333,7 @@
 
 .markup img[align="left"],
 .markup video[align="left"] {
-  padding-right: 20px;
+  padding-right: 28px;
 }
 
 .markup .emoji {