alexandrev/xslt-lab
1
0
Fork 0
mirror of https://github.com/alexandrev/xslt-lab.git synced 2026-09-16 18:23:16 +00:00
Code Packages Releases Activity

Use fixedheader style natively, neutralize position:fixed only

Browse Source 
Let EthicalAds render its own horizontal bar layout via data-ea-style=fixedheader.
CSS only overrides position/z-index to keep it inline instead of viewport-fixed.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
alexandrev-tibco
2026-05-04 13:12:23 +02:00
parent 70da86d7d6
commit 2ee596888a
2 changed files with 20 additions and 63 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/App.jsx
+2 -1
View File
@@ -2125,7 +2125,8 @@ export default function App() {
id="xsltplayground-main"
className="result-ad"
data-ea-publisher={ethicalAdsPublisher}
data-ea-type={ethicalAdType}
data-ea-type="text"
data-ea-style="fixedheader"
aria-label="Advertisement"
/>
)}
frontend/src/style.css
+18 -62
View File
@@ -1040,70 +1040,26 @@ a:focus-visible {
overflow: hidden;
}
/* Fixedheader-style thin bar — override EthicalAds text card layout */
.result-ad .ethical-ad {
margin: 0 !important;
padding: 0 !important;
box-shadow: none !important;
border: none !important;
border-radius: 0 !important;
background: transparent !important;
/* Use EthicalAds fixedheader layout inline — only neutralize fixed positioning */
.result-ad {
flex-shrink: 0;
overflow: hidden;
border-bottom: 1px solid var(--border-color, #e0e0e0);
}
/* Apply flex-row at every possible container level so callout is always inline */
.result-ad .ethical-ad,
.result-ad .ea-content {
display: flex !important;
flex-direction: row !important;
align-items: center !important;
gap: 10px !important;
padding: 4px 12px !important;
line-height: 1.3 !important;
}
.result-ad .ea-content {
flex: 1 !important;
min-width: 0 !important;
padding: 4px 12px !important;
}
.result-ad .ea-content a {
display: flex !important;
align-items: center !important;
gap: 8px !important;
flex: 1 !important;
min-width: 0 !important;
text-decoration: none !important;
}
.result-ad .ea-img {
width: 22px !important;
height: 22px !important;
min-width: 22px !important;
object-fit: cover !important;
border-radius: 2px !important;
display: block !important;
}
.result-ad .ea-text {
display: flex !important;
gap: 5px !important;
align-items: baseline !important;
flex: 1 !important;
min-width: 0 !important;
overflow: hidden !important;
white-space: nowrap !important;
}
.result-ad .ea-text strong,
.result-ad .ea-text span {
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
font-size: 13px !important;
}
.result-ad .ea-callout {
display: inline-flex !important;
align-items: center !important;
width: auto !important;
flex-shrink: 0 !important;
white-space: nowrap !important;
font-size: 10px !important;
opacity: 0.45 !important;
.result-ad [data-ea-style="fixedheader"] {
position: relative !important;
top: auto !important;
left: auto !important;
right: auto !important;
bottom: auto !important;
z-index: auto !important;
width: 100% !important;
box-shadow: none !important;
border-radius: 0 !important;
border-left: none !important;
border-right: none !important;
border-top: none !important;
}
.icon-button {