Skip to content

Commit 1a0b900

Browse files
agent-ptolemyagent-ptolemy
committed
fix: Improve Cusdis styling and fix height/scroll issues
- Remove unnecessary whitespace and border under Comments & Feedback header - Fix height constraints that were causing scrolling within comments box - Improve reaction button visibility with better selectors and styling - Ensure all Cusdis containers have proper height and overflow handling - Add minimum height to textarea for better user experience - Enhance debugging for reaction functionality detection
1 parent 1c73b59 commit 1a0b900

1 file changed

Lines changed: 93 additions & 26 deletions

File tree

‎docs/assets/cusdis.js‎

Lines changed: 93 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -47,13 +47,8 @@
4747
commentsHeading.textContent = 'Comments & Feedback';
4848
commentsHeading.id = 'comments';
4949

50-
// Add some spacing
51-
const spacer = document.createElement('div');
52-
spacer.style.marginBottom = '2rem';
53-
5450
// Insert the comments section
5551
insertPoint.appendChild(commentsHeading);
56-
insertPoint.appendChild(spacer);
5752
insertPoint.appendChild(cusdisContainer);
5853
insertPoint.appendChild(cusdisScript);
5954

@@ -105,18 +100,36 @@
105100
style.textContent = `
106101
/* Main comments container */
107102
#cusdis_thread {
108-
margin-top: 3rem;
109-
padding-top: 2rem;
110-
border-top: 1px solid var(--md-default-fg-color--lightest);
103+
margin-top: 1rem;
104+
padding-top: 0;
105+
border-top: none;
111106
font-family: var(--md-text-font-family);
112107
font-size: var(--md-typeset-font-size);
113108
line-height: var(--md-typeset-line-height);
109+
max-height: none !important;
110+
overflow: visible !important;
111+
height: auto !important;
114112
}
115113
116114
/* Comments list styling */
117115
#cusdis_thread .cusdis-comments {
118116
font-family: var(--md-text-font-family);
119117
color: var(--md-default-fg-color);
118+
max-height: none !important;
119+
overflow: visible !important;
120+
}
121+
122+
/* Individual comment styling */
123+
#cusdis_thread .cusdis-comment {
124+
border: 1px solid var(--md-default-fg-color--lightest);
125+
border-radius: 8px;
126+
margin-bottom: 1.5rem;
127+
padding: 1.5rem;
128+
background: var(--md-default-bg-color);
129+
box-shadow: 0 1px 3px rgba(0,0,0,0.1);
130+
transition: box-shadow 0.2s ease;
131+
max-height: none !important;
132+
overflow: visible !important;
120133
}
121134
122135
/* Individual comment styling */
@@ -195,6 +208,33 @@
195208
line-height: 1.5 !important;
196209
transition: all 0.2s ease !important;
197210
box-sizing: border-box !important;
211+
min-height: 120px !important;
212+
resize: vertical !important;
213+
}
214+
215+
/* Fix height constraints on all Cusdis containers */
216+
#cusdis_thread * {
217+
max-height: none !important;
218+
overflow: visible !important;
219+
}
220+
221+
/* Specific height fixes for common Cusdis elements */
222+
#cusdis_thread .cusdis-comment-form,
223+
#cusdis_thread .cusdis-comments,
224+
#cusdis_thread .cusdis-comment,
225+
#cusdis_thread .cusdis-loading,
226+
#cusdis_thread .cusdis-error {
227+
max-height: none !important;
228+
overflow: visible !important;
229+
height: auto !important;
230+
}
231+
232+
/* Ensure textarea has proper height */
233+
#cusdis_thread .cusdis-comment-form textarea {
234+
min-height: 120px !important;
235+
max-height: none !important;
236+
overflow-y: auto !important;
237+
resize: vertical !important;
198238
}
199239
200240
#cusdis_thread .cusdis-comment-form textarea:focus,
@@ -278,49 +318,65 @@
278318
border-color: var(--md-primary-fg-color);
279319
}
280320
281-
/* Reaction buttons styling */
282-
#cusdis_thread .cusdis-reaction {
321+
/* Reaction buttons styling - more specific selectors */
322+
#cusdis_thread .cusdis-reaction,
323+
#cusdis_thread [class*="reaction"],
324+
#cusdis_thread .cusdis-reaction-button {
283325
display: inline-flex !important;
284326
align-items: center !important;
285327
gap: 0.25rem !important;
286328
margin-right: 0.5rem !important;
287329
margin-bottom: 0.5rem !important;
288-
padding: 0.25rem 0.5rem !important;
330+
padding: 0.5rem 0.75rem !important;
289331
background: var(--md-default-bg-color) !important;
290-
border: 1px solid var(--md-default-fg-color--lightest) !important;
291-
border-radius: 16px !important;
332+
border: 2px solid var(--md-default-fg-color--lightest) !important;
333+
border-radius: 20px !important;
292334
cursor: pointer !important;
293335
transition: all 0.2s ease !important;
294-
font-size: 0.875em !important;
336+
font-size: 1em !important;
295337
color: var(--md-default-fg-color) !important;
338+
min-height: 36px !important;
339+
min-width: 60px !important;
340+
justify-content: center !important;
296341
}
297342
298-
#cusdis_thread .cusdis-reaction:hover {
343+
#cusdis_thread .cusdis-reaction:hover,
344+
#cusdis_thread [class*="reaction"]:hover,
345+
#cusdis_thread .cusdis-reaction-button:hover {
299346
background: var(--md-primary-fg-color) !important;
300347
color: var(--md-primary-bg-color) !important;
301348
border-color: var(--md-primary-fg-color) !important;
302349
transform: translateY(-1px) !important;
350+
box-shadow: 0 2px 8px rgba(0,0,0,0.15) !important;
303351
}
304352
305-
#cusdis_thread .cusdis-reaction.active {
353+
#cusdis_thread .cusdis-reaction.active,
354+
#cusdis_thread [class*="reaction"].active,
355+
#cusdis_thread .cusdis-reaction-button.active {
306356
background: var(--md-primary-fg-color) !important;
307357
color: var(--md-primary-bg-color) !important;
308358
border-color: var(--md-primary-fg-color) !important;
309359
}
310360
311-
#cusdis_thread .cusdis-reaction-count {
361+
#cusdis_thread .cusdis-reaction-count,
362+
#cusdis_thread [class*="reaction-count"] {
312363
font-weight: 600 !important;
313-
margin-left: 0.25rem !important;
364+
margin-left: 0.5rem !important;
365+
font-size: 0.9em !important;
314366
}
315367
316-
/* Ensure reaction container is visible */
317-
#cusdis_thread .cusdis-reactions {
368+
/* Ensure reaction container is visible - multiple selector variations */
369+
#cusdis_thread .cusdis-reactions,
370+
#cusdis_thread [class*="reactions"],
371+
#cusdis_thread .reactions-container {
318372
display: flex !important;
319373
flex-wrap: wrap !important;
320-
gap: 0.5rem !important;
321-
margin-top: 0.75rem !important;
322-
margin-bottom: 0.75rem !important;
323-
padding: 0.5rem 0 !important;
374+
gap: 0.75rem !important;
375+
margin-top: 1rem !important;
376+
margin-bottom: 1rem !important;
377+
padding: 0.75rem 0 !important;
378+
border-top: 1px solid var(--md-default-fg-color--lightest) !important;
379+
padding-top: 1rem !important;
324380
}
325381
326382
/* Responsive design */
@@ -347,19 +403,30 @@
347403
}
348404

349405
function checkReactions() {
350-
// Check if reactions are visible
351-
const reactions = document.querySelectorAll('.cusdis-reaction');
406+
// Check if reactions are visible with multiple selector variations
407+
const reactions = document.querySelectorAll('.cusdis-reaction, [class*="reaction"], .cusdis-reaction-button');
352408
if (reactions.length === 0) {
353409
console.log('Cusdis: No reaction buttons found, checking configuration...');
354410

355411
// Try to force reactions to show
356412
const cusdisThread = document.getElementById('cusdis_thread');
357413
if (cusdisThread) {
358414
cusdisThread.setAttribute('data-reaction', 'true');
415+
cusdisThread.setAttribute('data-theme', 'auto');
359416
console.log('Cusdis: Reactions should be enabled');
417+
418+
// Check again after a short delay
419+
setTimeout(() => {
420+
const retryReactions = document.querySelectorAll('.cusdis-reaction, [class*="reaction"], .cusdis-reaction-button');
421+
console.log(`Cusdis: Retry found ${retryReactions.length} reaction buttons`);
422+
}, 1000);
360423
}
361424
} else {
362425
console.log(`Cusdis: Found ${reactions.length} reaction buttons`);
363426
}
427+
428+
// Also check for reaction containers
429+
const reactionContainers = document.querySelectorAll('.cusdis-reactions, [class*="reactions"], .reactions-container');
430+
console.log(`Cusdis: Found ${reactionContainers.length} reaction containers`);
364431
}
365432
})();

0 commit comments

Comments
 (0)