Some CSS is broken in Firefox but fine in Chrome. Fix provided inside.

I have been making some modifications using “Inspect Element” to fix these, and dropping them into a file called theme-fixes.css, then loading that after the converse.min.css and theme.min.css to correct for it. Basically, Firefox is either not inheriting styles properly, or chrome is doing weird stuff that @jcbrand is developing against. I’ve tested these fixes in both chrome and firefox, and chrome looks identical before and after.

Here are my fixes so far:

#conversejs #controlbox #fancy-xmpp-status-select a.change-xmpp-status-message {
    margin-right: 5px;
    margin-top: 5px;
}

#conversejs #controlbox .dropdown dd.search-xmpp {
    width: 100%;
}

.current-xmpp-contact {
    display: block !important;
}

This fixes the following:

• The pencil icon in the status change box floats far too much into the upper right corner

• The “Add Contact” box has a width of 0% and makes adding new contacts difficult

• Contact entries are set to “display: inline;” instead of “display: block;” sometimes, and break the list when this happens. Names will either overlap names below them or all names will be displayed side by side instead of in a vertical list.

There’s one more I’m trying to fix right now with the ( i ) button next to room names not being aligned. One thing that works for Firefox but not Chrome is to set

#conversejs #controlbox #chatrooms dl.rooms-list dd.available-chatroom a.room-info::before {
    position: relative;
    top: 1px;
}

I hope this helps.

[Semperverus]

The right margin is fine, it’s floating upwards. Vertically. Since you had it in a rigid pixel by pixel defined box, I just changed it to 5px by 5px top and right. Keeps it in exactly the same spot horizontally but pushes it down to where it needs to be vertically. You could make it 0.3em by 0.3em if you like.

Also, it’s not showing in the code itself because I have a roster thing selected, so you’re seeing the code for my wife’s entry (or rather, the parent type for all entries, just focused on my wife’s), not the change status box.

I also have the “Add a contact” box showing as well, as that really bizarre vertical line with the half “add” button.

EDIT: I just realized why it doesn’t look like 3em to the right for you. I think it’s more of an optical illusion going on with the pencil glyph and the rounded corner at the top, making it look like it’s hitting a hard-right. Here’s what it looks like when I have the element specifically highlighted with the “calculation” bit showing: Yellow on the right is margin.

[Semperverus]

I figure to repeat this, the easiest way is to clone your repo into a blank new box (raspberry pi or virtual machine?), start a new instance of apache, clone converse.min.js into the /var/www/converse/dist/ and converse.min.css into /var/www/converse/css/, then copy my basic page (get rid of the bootstrap css, it does nothing and I haven’t removed it), and just go from there. It’s completely self-contained and stripped down.

This is literally my monthly update script I’m running now, if you want an idea of what I’m doing:

#!/bin/sh

#  Base
git pull https://github.com/jcbrand/converse.js

#  Javascript
wget -N -q https://cdn.conversejs.org/dist/converse.min.js -P dist/
wget -N -q https://cdn.conversejs.org/dist/converse-mobile.min.js -P dist/

#  CSS
wget -N -q https://cdn.conversejs.org/css/converse.min.css -P css/
wget -N -q https://cdn.conversejs.org/css/theme.min.css -P css/
wget -N -q https://cdn.conversejs.org/css/mobile.min.css -P css/
wget -N -q https://cdn.conversejs.org/css/converse-muc-embedded.min.css -P css/

(I’m grabbing them all by default because I intend to play with them and possibly integrate them later)