Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Consider constraining the height of the messagepane #671

Open
phiw13 opened this issue Mar 7, 2023 · 2 comments
Open

Consider constraining the height of the messagepane #671

phiw13 opened this issue Mar 7, 2023 · 2 comments
Milestone

Comments

@phiw13
Copy link

phiw13 commented Mar 7, 2023

… to prevent the messagepane to grow taller than the viewport - example: people uploading many images at once. OP in this forum thread - https://forum.textpattern.com/viewtopic.php?id=52037 - uploads upwards of 40 imagea at once.

Suggested code (as used in a custom.css file for testing):

/* .messagepane */
#messagepane {
  inset-inline-start: 4vw;  /* logical prop -> RTL/LTR */
  inset-inline-end: auto; /* override Hive stylesheet - for testing */
  max-width: 92vw; /* prevent endless width when faced with long strings */
}

/* .messagepane > span */
#messagepane .messageflash {
  overflow: auto;
  max-height: 80vh;
  position: static; /* override Hive stylesheet - for testing */
}

.close .ui-icon {
  bottom: min(50%, 20vh); /* never farther away from bottom than 20vh */
  top: auto; /* override Hive stylesheet - for testing */
}

Demo using Sandspace theme: https://dev.l-c-n.com/txp/txp-sandspace-messagepane_long.html

@phiw13
Copy link
Author

phiw13 commented Apr 10, 2023

Better positioning for the close icon:

.close .ui-icon {
  margin: 0 !important;
  bottom: min(50% - 4px, 20vh); /* never farther away from bottom than 20vh */
  top: auto !important; /* override Hive stylesheet - for testing */
}

(!important used to override the default stylesheet while testing)

@phiw13
Copy link
Author

phiw13 commented Dec 24, 2023

FWIW
The styling (positioning) would fix the current incorrect position of the close button (after Oleg changed it from a <a href> to <button />).

phiw13 referenced this issue in textpattern/textpattern Dec 24, 2023
@philwareham philwareham added this to the v5.0 milestone Feb 26, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants