mirror of
https://github.com/PR0M3TH3AN/bitvid.git
synced 2026-10-27 07:52:24 +00:00
google-labs-jules[bot]
b6f6483f48
- Add `flex-shrink: 0` to `.dm-avatar` in `css/tailwind.source.css` to prevent flexbox from resizing avatars inconsistently when space is constrained. - Rebuild `css/tailwind.generated.css` to apply the changes. - Verify changes with Playwright script and manual CSS inspection.
65 lines
2.6 KiB
Python
65 lines
2.6 KiB
Python
from playwright.sync_api import sync_playwright, expect
|
|
|
|
def verify_avatar_size():
|
|
with sync_playwright() as p:
|
|
browser = p.chromium.launch(headless=True)
|
|
page = browser.new_page()
|
|
|
|
# Load the index page directly via file protocol (assuming no build step is needed for CSS)
|
|
# Note: In a real environment we might need a server, but let's try direct file access first
|
|
# as tailwind.generated.css might be needed.
|
|
# Checking if we need to build first.
|
|
|
|
# Actually, let's just inspect the CSS rules applied to an element we create dynamically
|
|
# or load a simple HTML that imports the CSS.
|
|
|
|
# Let's try to load the app. If it fails, we will create a minimal reproduction.
|
|
try:
|
|
# We need to serve the files. Let's use python's http.server in background?
|
|
# Or just assume we can open index.html if it exists.
|
|
import os
|
|
cwd = os.getcwd()
|
|
page.goto(f"file://{cwd}/index.html")
|
|
|
|
# The app might need JS to render anything.
|
|
# Let's inject a contact row manually into the body to test the CSS.
|
|
|
|
page.evaluate("""
|
|
document.body.innerHTML = `
|
|
<div class="dm-contact-row" style="width: 200px; display: flex;">
|
|
<div class="dm-avatar dm-avatar--md" style="background: red;">
|
|
<img src="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg'/>" />
|
|
</div>
|
|
<div class="dm-contact-row__content" style="flex: 1; min-width: 0;">
|
|
<div class="dm-contact-row__name">A very long name that should normally shrink the avatar if flex-shrink is not set to 0</div>
|
|
</div>
|
|
</div>
|
|
`;
|
|
""")
|
|
|
|
# Allow some time for styles to apply if they are loaded async
|
|
page.wait_for_timeout(1000)
|
|
|
|
# Take a screenshot
|
|
page.screenshot(path="verification/avatar_verification.png")
|
|
|
|
# Also evaluate the computed style of the avatar
|
|
flex_shrink = page.evaluate("""
|
|
window.getComputedStyle(document.querySelector('.dm-avatar')).flexShrink
|
|
""")
|
|
|
|
print(f"Computed flex-shrink: {flex_shrink}")
|
|
|
|
if flex_shrink == '0':
|
|
print("SUCCESS: flex-shrink is 0")
|
|
else:
|
|
print("FAILURE: flex-shrink is NOT 0")
|
|
|
|
except Exception as e:
|
|
print(f"Error: {e}")
|
|
finally:
|
|
browser.close()
|
|
|
|
if __name__ == "__main__":
|
|
verify_avatar_size()
|