jessikitty/ScratchingPost
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

fix: Force inline content (images, tables) to respect container bounds with !important overrides

Browse Source
This commit is contained in:
jessikitty committed 2026-10-05 15:06:05 +11:00
1 parent 9920cb287c
commit 87a0c46318
1 file changed
+23 -3
Download Patch File Download Diff File Expand all files Collapse all files
wwwroot/css/display.css
+23 -3
View File
@@ -10,6 +10,7 @@ html, body { width: 100%; height: 100%; overflow: hidden; background: #fff; font
top: 50%; top: 50%;
left: 50%; left: 50%;
transform-origin: center center; transform-origin: center center;
overflow: hidden;
} }
/* === Slide Container === */ /* === Slide Container === */
@@ -24,14 +25,33 @@ body[data-transition="slide"] .slide-layer.slide-out { transform: translateX(-10
body[data-transition="none"] .slide-layer { transition: none; } body[data-transition="none"] .slide-layer { transition: none; }
/* === Slide Content === */ /* === Slide Content === */
.slide-inner { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; background-size: cover; background-position: center; background-repeat: no-repeat; } .slide-inner { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; background-size: cover; background-position: center; background-repeat: no-repeat; overflow: hidden; }
.slide-inner .content-wrap { width: 100%; height: 100%; overflow: hidden; } .slide-inner .content-wrap { width: 100%; height: 100%; overflow: hidden; }
/* === Force inline content to respect container bounds === */
.slide-inner .content-wrap img {
max-width: 100% !important;
height: auto !important;
object-fit: contain;
}
.slide-inner .content-wrap table {
max-width: 100% !important;
table-layout: auto;
width: auto;
margin: 1em auto;
border-collapse: collapse;
}
.slide-inner .content-wrap iframe {
max-width: 100% !important;
}
.slide-inner .content-wrap * {
max-width: 100%;
}
.slide-inner h1 { font-size: 3em; font-weight: 700; } .slide-inner h1 { font-size: 3em; font-weight: 700; }
.slide-inner h2 { font-size: 2.2em; font-weight: 600; } .slide-inner h2 { font-size: 2.2em; font-weight: 600; }
.slide-inner h3 { font-size: 1.6em; font-weight: 600; } .slide-inner h3 { font-size: 1.6em; font-weight: 600; }
.slide-inner p { font-size: 1.2em; line-height: 1.6; } .slide-inner p { font-size: 1.2em; line-height: 1.6; }
.slide-inner img { max-width: 100%; max-height: 100%; object-fit: contain; }
.slide-inner table { width: auto; margin: 1em auto; border-collapse: collapse; }
.slide-inner table td, .slide-inner table th { padding: 0.6em 1em; border: 1px solid rgba(0, 0, 0, 0.2); } .slide-inner table td, .slide-inner table th { padding: 0.6em 1em; border: 1px solid rgba(0, 0, 0, 0.2); }
.slide-inner table th { background: rgba(0, 0, 0, 0.05); font-weight: 600; } .slide-inner table th { background: rgba(0, 0, 0, 0.05); font-weight: 600; }
.slide-inner iframe.embed-frame { width: 100%; height: 100%; border: none; } .slide-inner iframe.embed-frame { width: 100%; height: 100%; border: none; }