Fossil SCM
Documented the reason for not setting a max-height on the new editor widget, and the side effects of that decision.
Commit
71fbd1b01ba42ee6edc7f4d23965beaa26a39f538c09f7bccdcd23fee2971165
Parent
91b653e845bfbb7…
1 file changed
+18
-1
+18
-1
| --- src/style.chat.css | ||
| +++ src/style.chat.css | ||
| @@ -247,10 +247,27 @@ | ||
| 247 | 247 | border-left-width: 3px; |
| 248 | 248 | border-right-style: double; |
| 249 | 249 | border-right-width: 3px;*/ |
| 250 | 250 | min-height: 4rem; |
| 251 | 251 | resize: both; |
| 252 | + /*max-height: 50rem;*/ | |
| 253 | +/* | |
| 254 | + Problems related to max-height: | |
| 255 | + | |
| 256 | + - If we do NOT set a max-height then pasting/typing a large amount | |
| 257 | + of text can cause this element to grow without bounds, larger than | |
| 258 | + the window, and there's no way to navigate it sensibly. In this | |
| 259 | + case, manually resizing the element (desktop only - mobile doesn't | |
| 260 | + offer that) will force it to stay at the selected size even if more | |
| 261 | + content is added to it later. | |
| 262 | + | |
| 263 | + - If we DO set a max-height then its growth is bounded but it also | |
| 264 | + cannot manually expanded by the user. | |
| 265 | + | |
| 266 | + The lesser of the two evils seems to be to rely on the browser | |
| 267 | + feature that a manual resize of the element will pin its sits. | |
| 268 | +*/ | |
| 252 | 269 | } |
| 253 | 270 | |
| 254 | 271 | body.chat #chat-input-line.compact #chat-edit-buttons > * { |
| 255 | 272 | margin: 0 0.25em; |
| 256 | 273 | min-width: 2em; |
| @@ -315,11 +332,11 @@ | ||
| 315 | 332 | body.chat #chat-drop-details img { |
| 316 | 333 | max-width: 45%; |
| 317 | 334 | max-height: 45%; |
| 318 | 335 | } |
| 319 | 336 | body.chat .chat-view { |
| 320 | - flex: 20 1 auto | |
| 337 | + flex: 20 0 auto | |
| 321 | 338 | /*ensure that these grow more than the non-.chat-view elements*/; |
| 322 | 339 | margin-bottom: 0.2em; |
| 323 | 340 | } |
| 324 | 341 | body.chat #chat-config, |
| 325 | 342 | body.chat #chat-preview { |
| 326 | 343 |
| --- src/style.chat.css | |
| +++ src/style.chat.css | |
| @@ -247,10 +247,27 @@ | |
| 247 | border-left-width: 3px; |
| 248 | border-right-style: double; |
| 249 | border-right-width: 3px;*/ |
| 250 | min-height: 4rem; |
| 251 | resize: both; |
| 252 | } |
| 253 | |
| 254 | body.chat #chat-input-line.compact #chat-edit-buttons > * { |
| 255 | margin: 0 0.25em; |
| 256 | min-width: 2em; |
| @@ -315,11 +332,11 @@ | |
| 315 | body.chat #chat-drop-details img { |
| 316 | max-width: 45%; |
| 317 | max-height: 45%; |
| 318 | } |
| 319 | body.chat .chat-view { |
| 320 | flex: 20 1 auto |
| 321 | /*ensure that these grow more than the non-.chat-view elements*/; |
| 322 | margin-bottom: 0.2em; |
| 323 | } |
| 324 | body.chat #chat-config, |
| 325 | body.chat #chat-preview { |
| 326 |
| --- src/style.chat.css | |
| +++ src/style.chat.css | |
| @@ -247,10 +247,27 @@ | |
| 247 | border-left-width: 3px; |
| 248 | border-right-style: double; |
| 249 | border-right-width: 3px;*/ |
| 250 | min-height: 4rem; |
| 251 | resize: both; |
| 252 | /*max-height: 50rem;*/ |
| 253 | /* |
| 254 | Problems related to max-height: |
| 255 | |
| 256 | - If we do NOT set a max-height then pasting/typing a large amount |
| 257 | of text can cause this element to grow without bounds, larger than |
| 258 | the window, and there's no way to navigate it sensibly. In this |
| 259 | case, manually resizing the element (desktop only - mobile doesn't |
| 260 | offer that) will force it to stay at the selected size even if more |
| 261 | content is added to it later. |
| 262 | |
| 263 | - If we DO set a max-height then its growth is bounded but it also |
| 264 | cannot manually expanded by the user. |
| 265 | |
| 266 | The lesser of the two evils seems to be to rely on the browser |
| 267 | feature that a manual resize of the element will pin its sits. |
| 268 | */ |
| 269 | } |
| 270 | |
| 271 | body.chat #chat-input-line.compact #chat-edit-buttons > * { |
| 272 | margin: 0 0.25em; |
| 273 | min-width: 2em; |
| @@ -315,11 +332,11 @@ | |
| 332 | body.chat #chat-drop-details img { |
| 333 | max-width: 45%; |
| 334 | max-height: 45%; |
| 335 | } |
| 336 | body.chat .chat-view { |
| 337 | flex: 20 0 auto |
| 338 | /*ensure that these grow more than the non-.chat-view elements*/; |
| 339 | margin-bottom: 0.2em; |
| 340 | } |
| 341 | body.chat #chat-config, |
| 342 | body.chat #chat-preview { |
| 343 |