After translating and testing Gadget-Cat-a-lot.js on Persian Wikipedia, I have identified several RTL compatibility issues that significantly affect the user interface layout and usability in RTL wikis such as Persian, Arabic, and Hebrew Wikipedias.

While the gadget correctly detects RTL using is_rtl = $( 'body' ).hasClass( 'rtl' ), this detection is not consistently applied to CSS properties that require directional adjustments.

Issue #1:

Problem:
Hard-coded float: right causes UI elements to float to the right side even in RTL layouts, where they should float to the left side for proper visual alignment.

Impact: Help link appears on wrong side of the interface

Line 229 - Help link:

style: 'float:right',

Line 410 - Lock control:

.css({ 'margin-left': '.7em', 'font-size': '.9em; float:right' })

Line 2145 - Counter display:

.css( {
    'float': 'right',
    fontSize: '75%'
} )

Recommended Fix:

// Option 1:
style: is_rtl ? 'float:left' : 'float:right'

// Option 2:
style: 'float:inline-end'

Issue #2:

Problem:
Properties like margin-left, padding-left do not flip in RTL layouts, causing incorrect spacing and visual misalignment.

Impact: Text and controls have wrong spacing in RTL

Line 222 - Label styling:

.css( { fontWeight: 'bold', marginLeft: '.7em' } )

Line 410 - Lock control margin:

.css({ 'margin-left': '.7em', 'font-size': '.9em; float:right' })

Line 419 - Category input padding:

.css('padding-left', '0.5em')

Line 445 - Mode dropdown margin:

.css('margin-left', '0.5em')

Line 449 - Target category padding:

.css('padding-left', '0.5em')

Recommended Fix:

// Option 1:
.css(is_rtl ? { marginRight: '.7em' } : { marginLeft: '.7em' })

// Option 2:
.css({ 'margin-inline-start': '.7em' })
.css({ 'padding-inline-start': '0.5em' })

Issue #3:

Problem:
Hard-coded left and right positioning properties do not adapt to RTL layouts, causing the dialog container to appear in the wrong position or extend beyond viewport boundaries.

Lines 528-533 - Container initial positioning:

$container.css({
    top: pos.top,
    left: pos.left,    // Should be 'right' in RTL
    right: 0,          // Should be 'left' in RTL
    bottom: 0,
    position: 'fixed',
    'max-height': '100vh'
});

Lines 2256-2259 - Boundary correction:

$container.css({
    right: 0,   // Should be 'left' in RTL
    bottom: 0
});

Recommended Fix:

const leftProp = is_rtl ? 'right' : 'left';
const rightProp = is_rtl ? 'left' : 'right';

$container.css({
    top: pos.top,
    [leftProp]: pos.left,
    [rightProp]: 0,
    bottom: 0,
    position: 'fixed',
    'max-height': '100vh'
});

$container.css(
    is_rtl ? { left: 0, bottom: 0 } : { right: 0, bottom: 0 }
);