Skip to content

Commit f94eb3f

Browse files
Claudehotlong
Claude
and
hotlong
authored
Changes before error encountered
Agent-Logs-Url: https://github.com/objectstack-ai/objectui/sessions/cff42d5a-b0cf-4ca5-9c41-1aba38af1dc6 Co-authored-by: hotlong <50353452+hotlong@users.noreply.github.com>
1 parent ab29743 commit f94eb3f

File tree

7 files changed

+446
-5
lines changed

7 files changed

+446
-5
lines changed

‎packages/components/src/index.css‎

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -217,23 +217,24 @@ body {
217217

218218
/* When expanded, ensure labels are visible and menu buttons are normal size */
219219
.group[data-collapsible="icon"][data-state="expanded"] .group-data-\[collapsible\=icon\]\:opacity-0 {
220-
opacity: 1;
220+
opacity: 1 !important;
221221
}
222222

223223
.group[data-collapsible="icon"][data-state="expanded"] .group-data-\[collapsible\=icon\]\:-mt-8 {
224-
margin-top: 0;
224+
margin-top: 0 !important;
225225
}
226226

227227
.group[data-collapsible="icon"][data-state="expanded"] .group-data-\[collapsible\=icon\]\:hidden {
228-
display: block;
228+
display: block !important;
229229
}
230230

231231
.group[data-collapsible="icon"][data-state="expanded"] .group-data-\[collapsible\=icon\]\:overflow-hidden {
232-
overflow: visible;
232+
overflow: visible !important;
233233
}
234234

235+
/* CRITICAL: Reset size constraint in expanded state - use width: 100% to fill container */
235236
.group[data-collapsible="icon"][data-state="expanded"] .group-data-\[collapsible\=icon\]\:\!size-8 {
236-
width: auto !important;
237+
width: 100% !important;
237238
height: auto !important;
238239
}
239240

‎test-all-rules.mjs‎

Lines changed: 58 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
import { chromium } from 'playwright';
2+
3+
async function checkAllRulesForButton() {
4+
const browser = await chromium.launch({ headless: true });
5+
const page = await browser.newPage({ viewport: { width: 1920, height: 1080 } });
6+
7+
try {
8+
await page.goto('http://localhost:5174/console/', { waitUntil: 'networkidle', timeout: 30000 });
9+
await page.waitForTimeout(3000);
10+
11+
const analysis = await page.evaluate(() => {
12+
const button = document.querySelector('[data-sidebar="menu-button"]');
13+
if (!button) return { error: 'Button not found' };
14+
15+
// Find the EXACT class on the button
16+
const targetClass = 'group-data-[collapsible=icon]:!size-8';
17+
const escapedClass = 'group-data-\\[collapsible\\=icon\\]\\:\\!size-8';
18+
19+
// Get all stylesheets and find rules that match this exact class
20+
const matchingRules = [];
21+
Array.from(document.styleSheets).forEach(sheet => {
22+
try {
23+
Array.from(sheet.cssRules ||[]).forEach(rule => {
24+
const selector = rule.selectorText || '';
25+
// Check if selector contains the escaped class
26+
if (selector.includes(escapedClass) || selector.includes('!size-8')) {
27+
matchingRules.push({
28+
selector,
29+
cssText: rule.cssText,
30+
width: rule.style?.width || 'none',
31+
height: rule.style?.height || 'none'
32+
});
33+
}
34+
});
35+
} catch (e) {}
36+
});
37+
38+
// Also check what the actual computed style is
39+
const computed = window.getComputedStyle(button);
40+
41+
return {
42+
classOnButton: button.classList.contains(targetClass),
43+
allMatchingRules: matchingRules,
44+
computed: {
45+
width: computed.width,
46+
height: computed.height,
47+
display: computed.display
48+
}
49+
};
50+
});
51+
52+
console.log(JSON.stringify(analysis, null, 2));
53+
} finally {
54+
await browser.close();
55+
}
56+
}
57+
58+
checkAllRulesForButton().catch(console.error);

‎test-comprehensive.mjs‎

Lines changed: 182 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,182 @@
1+
import { chromium } from 'playwright';
2+
import { mkdirSync } from 'fs';
3+
4+
try {
5+
mkdirSync('/tmp/playwright-logs', { recursive: true });
6+
} catch (e) {}
7+
8+
async function comprehensiveTextVisibilityTest() {
9+
console.log('Starting comprehensive sidebar text visibility test...');
10+
const browser = await chromium.launch({ headless: true });
11+
const page = await browser.newPage({
12+
viewport: { width: 1920, height: 1080 }
13+
});
14+
15+
try {
16+
await page.goto('http://localhost:5173/console/', { waitUntil: 'networkidle', timeout: 30000 });
17+
await page.waitForTimeout(3000);
18+
19+
console.log('\n=== EXPANDED STATE (DEFAULT) ===');
20+
await page.screenshot({ path: '/tmp/playwright-logs/comprehensive-expanded.png', fullPage: true });
21+
22+
const expandedAnalysis = await page.evaluate(() => {
23+
const sidebar = document.querySelector('[data-sidebar="sidebar"]');
24+
const parent = sidebar?.parentElement?.parentElement;
25+
26+
// Get all text elements in sidebar
27+
const allText = Array.from(sidebar?.querySelectorAll('*') || [])
28+
.filter(el => {
29+
const text = el.textContent?.trim();
30+
return text && text.length > 0 && text.length < 100;
31+
})
32+
.map(el => {
33+
const style = window.getComputedStyle(el);
34+
const rect = el.getBoundingClientRect();
35+
return {
36+
tag: el.tagName.toLowerCase(),
37+
text: el.textContent?.trim().substring(0, 50),
38+
classes: el.className,
39+
dataAttr: el.getAttribute('data-sidebar'),
40+
display: style.display,
41+
opacity: style.opacity,
42+
visibility: style.visibility,
43+
width: style.width,
44+
height: style.height,
45+
overflow: style.overflow,
46+
position: style.position,
47+
isVisible: rect.width > 0 && rect.height > 0 && style.display !== 'none' && parseFloat(style.opacity) > 0
48+
};
49+
});
50+
51+
// Group by visibility
52+
const visible = allText.filter(t => t.isVisible);
53+
const invisible = allText.filter(t => !t.isVisible);
54+
55+
// Get specific elements
56+
const menuButtons = Array.from(document.querySelectorAll('[data-sidebar="menu-button"]'));
57+
const groupLabels = Array.from(document.querySelectorAll('[data-sidebar="group-label"]'));
58+
59+
return {
60+
dataState: parent?.getAttribute('data-state'),
61+
dataCollapsible: parent?.getAttribute('data-collapsible'),
62+
sidebarWidth: sidebar?.parentElement ? window.getComputedStyle(sidebar.parentElement).width : null,
63+
totalTextElements: allText.length,
64+
visibleCount: visible.length,
65+
invisibleCount: invisible.length,
66+
invisibleElements: invisible.slice(0, 10),
67+
menuButtonsAnalysis: menuButtons.slice(0, 3).map(btn => {
68+
const style = window.getComputedStyle(btn);
69+
const spans = Array.from(btn.querySelectorAll('span'));
70+
return {
71+
text: btn.textContent?.trim().substring(0, 30),
72+
classes: btn.className.substring(0, 200),
73+
width: style.width,
74+
height: style.height,
75+
display: style.display,
76+
overflow: style.overflow,
77+
spans: spans.map(s => ({
78+
text: s.textContent?.trim(),
79+
display: window.getComputedStyle(s).display,
80+
opacity: window.getComputedStyle(s).opacity,
81+
overflow: window.getComputedStyle(s).overflow,
82+
width: window.getComputedStyle(s).width
83+
}))
84+
};
85+
}),
86+
groupLabelsAnalysis: groupLabels.map(label => ({
87+
text: label.textContent?.trim(),
88+
display: window.getComputedStyle(label).display,
89+
opacity: window.getComputedStyle(label).opacity,
90+
marginTop: window.getComputedStyle(label).marginTop
91+
}))
92+
};
93+
});
94+
95+
console.log('\nExpanded State Analysis:');
96+
console.log('Data State:', expandedAnalysis.dataState);
97+
console.log('Sidebar Width:', expandedAnalysis.sidebarWidth);
98+
console.log('Total Text Elements:', expandedAnalysis.totalTextElements);
99+
console.log('Visible Elements:', expandedAnalysis.visibleCount);
100+
console.log('Invisible Elements:', expandedAnalysis.invisibleCount);
101+
102+
if (expandedAnalysis.invisibleCount > 0) {
103+
console.log('\n⚠️ INVISIBLE TEXT ELEMENTS IN EXPANDED STATE:');
104+
expandedAnalysis.invisibleElements.forEach((el, i) => {
105+
console.log(`${i + 1}. "${el.text}"`);
106+
console.log(` Tag: ${el.tag}, Data: ${el.dataAttr}`);
107+
console.log(` Display: ${el.display}, Opacity: ${el.opacity}, Overflow: ${el.overflow}`);
108+
console.log(` Width: ${el.width}, Height: ${el.height}`);
109+
console.log(` Classes: ${el.classes.substring(0, 100)}...`);
110+
});
111+
}
112+
113+
console.log('\nMenu Buttons Analysis:');
114+
expandedAnalysis.menuButtonsAnalysis.forEach((btn, i) => {
115+
console.log(`\nButton ${i + 1}: "${btn.text}"`);
116+
console.log(` Width: ${btn.width}, Height: ${btn.height}`);
117+
console.log(` Overflow: ${btn.overflow}`);
118+
console.log(` Spans (${btn.spans.length}):`);
119+
btn.spans.forEach((span, j) => {
120+
console.log(` Span ${j + 1}: "${span.text}"`);
121+
console.log(` Display: ${span.display}, Opacity: ${span.opacity}, Width: ${span.width}, Overflow: ${span.overflow}`);
122+
});
123+
});
124+
125+
if (expandedAnalysis.groupLabelsAnalysis.length > 0) {
126+
console.log('\nGroup Labels Analysis:');
127+
expandedAnalysis.groupLabelsAnalysis.forEach((label, i) => {
128+
console.log(` ${i + 1}. "${label.text}": display=${label.display}, opacity=${label.opacity}, marginTop=${label.marginTop}`);
129+
});
130+
}
131+
132+
// Now test collapsed state
133+
console.log('\n\n=== COLLAPSING SIDEBAR ===');
134+
await page.evaluate(() => {
135+
document.querySelector('[data-sidebar="trigger"]')?.click();
136+
});
137+
await page.waitForTimeout(500);
138+
await page.screenshot({ path: '/tmp/playwright-logs/comprehensive-collapsed.png', fullPage: true });
139+
140+
const collapsedAnalysis = await page.evaluate(() => {
141+
const sidebar = document.querySelector('[data-sidebar="sidebar"]');
142+
const parent = sidebar?.parentElement?.parentElement;
143+
return {
144+
dataState: parent?.getAttribute('data-state'),
145+
sidebarWidth: sidebar?.parentElement ? window.getComputedStyle(sidebar.parentElement).width : null
146+
};
147+
});
148+
149+
console.log('\nCollapsed State:');
150+
console.log('Data State:', collapsedAnalysis.dataState);
151+
console.log('Sidebar Width:', collapsedAnalysis.sidebarWidth);
152+
153+
// Test re-expand
154+
console.log('\n\n=== RE-EXPANDING SIDEBAR ===');
155+
await page.evaluate(() => {
156+
document.querySelector('[data-sidebar="trigger"]')?.click();
157+
});
158+
await page.waitForTimeout(500);
159+
await page.screenshot({ path: '/tmp/playwright-logs/comprehensive-reexpanded.png', fullPage: true });
160+
161+
console.log('\n=== SUMMARY ===');
162+
console.log(`✅ Sidebar state changes work: ${expandedAnalysis.dataState === 'expanded' && collapsedAnalysis.dataState === 'collapsed'}`);
163+
console.log(`✅ Sidebar width changes work: ${expandedAnalysis.sidebarWidth === '256px' && collapsedAnalysis.sidebarWidth === '48px'}`);
164+
console.log(`⚠️ Text visibility issues: ${expandedAnalysis.invisibleCount} invisible elements in expanded state`);
165+
166+
if (expandedAnalysis.invisibleCount > 0) {
167+
console.log('\n🔴 PROBLEM DETECTED: Text elements are still invisible when expanded!');
168+
process.exit(1);
169+
}
170+
171+
} catch (error) {
172+
console.error('Error during test:', error);
173+
throw error;
174+
} finally {
175+
await browser.close();
176+
}
177+
}
178+
179+
comprehensiveTextVisibilityTest().catch(err => {
180+
console.error('Test failed:', err);
181+
process.exit(1);
182+
});

‎test-debug-css.mjs‎

Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
import { chromium } from 'playwright';
2+
3+
async function debugCSSSelectors() {
4+
const browser = await chromium.launch({ headless: true });
5+
const page = await browser.newPage({ viewport: { width: 1920, height: 1080 } });
6+
7+
try {
8+
await page.goto('http://localhost:5174/console/', { waitUntil: 'networkidle', timeout: 30000 });
9+
await page.waitForTimeout(3000);
10+
11+
const debug = await page.evaluate(() => {
12+
const button = document.querySelector('[data-sidebar="menu-button"]');
13+
if (!button) return { error: 'Button not found' };
14+
15+
const classes = button.className;
16+
const classList = Array.from(button.classList);
17+
const parent = button.closest('[data-collapsible]');
18+
19+
// Check which CSS rules match
20+
const matchedRules = [];
21+
const allRules = Array.from(document.styleSheets)
22+
.flatMap(sheet => {
23+
try {
24+
return Array.from(sheet.cssRules ||[]);
25+
} catch (e) {
26+
return [];
27+
}
28+
})
29+
.filter(rule => rule.selectorText && rule.selectorText.includes('group-data'))
30+
.map(rule => ({
31+
selector: rule.selectorText,
32+
styles: rule.style.cssText
33+
}));
34+
35+
return {
36+
buttonClasses: classList,
37+
parentDataState: parent?.getAttribute('data-state'),
38+
parentDataCollapsible: parent?.getAttribute('data-collapsible'),
39+
parentHasGroupClass: parent?.classList.contains('group'),
40+
computedWidth: window.getComputedStyle(button).width,
41+
computedHeight: window.getComputedStyle(button).height,
42+
allGroupDataRules: allRules.slice(0, 20)
43+
};
44+
});
45+
46+
console.log(JSON.stringify(debug, null, 2));
47+
} finally {
48+
await browser.close();
49+
}
50+
}
51+
52+
debugCSSSelectors().catch(console.error);

‎test-find-rules.mjs‎

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
import { chromium } from 'playwright';
2+
3+
async function findConflictingRules() {
4+
const browser = await chromium.launch({ headless: true });
5+
const page = await browser.newPage({ viewport: { width: 1920, height: 1080 } });
6+
7+
try {
8+
await page.goto('http://localhost:5174/console/', { waitUntil: 'networkidle', timeout: 30000 });
9+
await page.waitForTimeout(3000);
10+
11+
const rules = await page.evaluate(() => {
12+
const button = document.querySelector('[data-sidebar="menu-button"]');
13+
if (!button) return { error: 'Button not found' };
14+
15+
// Get ALL CSS rules that might affect the button's width
16+
const allSheets = Array.from(document.styleSheets);
17+
const widthRules = [];
18+
19+
for (const sheet of allSheets) {
20+
try {
21+
const rules = Array.from(sheet.cssRules || []);
22+
for (const rule of rules) {
23+
if (rule.style && (rule.style.width || rule.style.height)) {
24+
// Check if this rule might apply to our button
25+
const text = rule.selectorText || '';
26+
if (text.includes('size-8') || text.includes('menu-button') || text.includes('group-data')) {
27+
widthRules.push({
28+
selector: text,
29+
width: rule.style.width,
30+
height: rule.style.height,
31+
important: rule.style.width?.includes('!important') || false,
32+
sheet: sheet.href ? sheet.href.substring(sheet.href.lastIndexOf('/') + 1) : 'inline'
33+
});
34+
}
35+
}
36+
}
37+
} catch (e) {
38+
// CORS or other errors
39+
}
40+
}
41+
42+
return {
43+
buttonHasClass: button.classList.contains('group-data-[collapsible=icon]:!size-8'),
44+
computedWidth: window.getComputedStyle(button).width,
45+
widthRules: widthRules.filter(r => r.selector && r.width)
46+
};
47+
});
48+
49+
console.log(JSON.stringify(rules, null, 2));
50+
} finally {
51+
await browser.close();
52+
}
53+
}
54+
55+
findConflictingRules().catch(console.error);

0 commit comments

Comments
 (0)