Diff improvements (#23553)

- Avoid flash of wrong tree toggle icon on page load by setting icon
based on sync state
- Avoid "pop-in" of tree on page load by leaving space based on sync
state
- Use the same border/box-shadow combo used on comment `:target` also
for file `:target`.
- Refactor `DiffFileTree.vue` to use `toggleElem` instead of hardcoded
class name.
- Left-align inline comment boxes and make them fit the same amount of
markup content on a line as GitHub.
- Fix height of `diff-file-list`

Fixes: https://github.com/go-gitea/gitea/issues/23593

<img width="1250" alt="Screenshot 2023-03-18 at 00 52 04"
src="https://user-images.githubusercontent.com/115237/226071392-6789a644-aead-4756-a77e-aba3642150a0.png">
<img width="1246" alt="Screenshot 2023-03-18 at 00 59 43"
src="https://user-images.githubusercontent.com/115237/226071443-8bcba924-458b-48bd-b2f0-0de59cb180ac.png">
<img width="1250" alt="Screenshot 2023-03-18 at 01 27 14"
src="https://user-images.githubusercontent.com/115237/226073121-ccb99f9a-d3ac-40b7-9589-43580c4a01c9.png">
<img width="1231" alt="Screenshot 2023-03-19 at 21 44 16"
src="https://user-images.githubusercontent.com/115237/226207951-81bcae1b-6b41-4e39-83a7-0f37951df6be.png">

(Yes I'm aware the border-radius in bottom corners is suboptimal, but
this would be notorously hard to fix without relying on `overflow:
hidden`).

1 files changed, 1 insertions, 10 deletions

diff --git a/web_src/css/review.css b/web_src/css/review.css
index 42267b4d2a..3deb2192fc 100644
--- a/web_src/css/review.css
+++ b/web_src/css/review.css
@@ -67,8 +67,7 @@
 .comment-code-cloud {
   padding: 0.5rem 1rem !important;
   position: relative;
-  margin: 0 auto;
-  max-width: 1000px;
+  max-width: 820px;
 }
 
 @media (max-width: 767px) {
@@ -308,11 +307,3 @@ a.blob-excerpt:hover {
   width: 72px;
   height: 10px;
 }
-
-.diff-file-box {
-  border-radius: 0.285rem; /* Just like ui.top.attached.header */
-}
-
-.diff-file-box:target {
-  box-shadow: 0 0 0 3px var(--color-accent);
-}