luci-mod-dashboard: wrapping of long hostnames

[GrumpyMeow]

Is there an existing issue for this?

• I have searched the existing issues

screenshots or captures

I've did some local modifications which resulted in a visually more appealing output:

Actual behaviour

I have some devices with longer hostnames defined. I see that those hostnames get wrapped to fit the column width of the table.

Expected behaviour

I would expect the hostnames not to wrap as there is enough space available, although currently reserved for the mac- and ip-address.

When looking at the rendering code and output Html i notice that two tables are used for rendering. Using a seperate table for rendering the table-header is not neccessary and makes it hard to get the table styling to adjust to the actual displayed device information (hostname, mac, ip).

https://github.com/openwrt/luci/blob/e23f6069d6fb91d75147f908bd15d2ee96e6a5d7/modules/luci-mod-dashboard/htdocs/luci-static/resources/view/dashboard/include/20_lan.js#L26C3-L36C87

My suggestion is to modify this code into:

renderHtml: function() {

		var container_wapper = E('div', { 'class': 'router-status-lan dashboard-bg box-s1' });
		var container_box = E('div', { 'class': 'lan-info devices-list' });
		var container_devices = E('table', { 'class': 'table assoclist devices-info' }, [
			E('tr', { 'class': 'tr table-titles  dashboard-bg' }, [
				E('th', { 'class': 'th nowrap' }, _('Hostname')),
				E('th', { 'class': 'th' }, _('IP Address')),
				E('th', { 'class': 'th' }, _('MAC')),
			])
		]);

		// var container_deviceslist = E('table', { 'class': 'table assoclist devices-info' });  <--- remove this 2nd table

		container_box.appendChild(E('div', { 'class': 'title'}, [
			E('img', {
				'src': L.resource('view/dashboard/icons/devices.svg'),
				'width': 55,
				'title': this.title,
				'class': 'middle svgmonotone'
			}),
			E('h3', this.title)
		]));

		for(var idx in this.params.lan.devices) {
			var deivce = this.params.lan.devices[idx];

			// container_deviceslist.appendChild(E('tr', { 'class': 'tr cbi-rowstyle-1'}, [   <= modified
                            container_devices.appendChild(E('tr', { 'class': 'tr cbi-rowstyle-1'}, [

				E('td', { 'class': 'td device-info'}, [
					E('p', {}, [
						E('span', { 'class': 'd-inline-block'}, [ deivce.hostname ]),
					]),
				]),

				E('td', { 'class': 'td device-info'}, [
					E('p', {}, [
						E('span', { 'class': 'd-inline-block'}, [ deivce.ipv4 ]),
					]),
				]),

				E('td', { 'class': 'td device-info'}, [
					E('p', {}, [
						E('span', { 'class': 'd-inline-block'}, [ deivce.macaddr ]),
					]),
				])
			]));
		}

		container_box.appendChild(E('hr'));
		container_box.appendChild(container_devices);
		container_box.appendChild(E('hr'));
		// container_box.appendChild(container_deviceslist);    <= removed
		container_wapper.appendChild(container_box);

		return container_wapper;
	},

The above situation should allow to do styling:

.lan-info table.assoclist {
    width: 100%;
}

.lan-info table.assoclist th:nth-child(1), 
.lan-info table.assoclist td:nth-child(1) { 
    width: 100% !important;
    white-space:normal;
}


.lan-info table.assoclist th:nth-child(2), 
.lan-info table.assoclist td:nth-child(2), 
.lan-info table.assoclist th:nth-child(3), 
.lan-info table.assoclist td:nth-child(3) { 
    white-space: nowrap; 
    width: unset !important;
}

Steps to reproduce

Provide a long hostname for a device

Additional Information

NAME="OpenWrt"
VERSION="23.05.5"
ID="openwrt"
ID_LIKE="lede openwrt"
PRETTY_NAME="OpenWrt 23.05.5"
VERSION_ID="23.05.5"
HOME_URL="https://openwrt.org/"
BUG_URL="https://bugs.openwrt.org/"
SUPPORT_URL="https://forum.openwrt.org/"
BUILD_ID="r24106-10cc5fcd00"
OPENWRT_BOARD="ramips/mt7621"
OPENWRT_ARCH="mipsel_24kc"
OPENWRT_TAINTS=""
OPENWRT_DEVICE_MANUFACTURER="OpenWrt"
OPENWRT_DEVICE_MANUFACTURER_URL="https://openwrt.org/"
OPENWRT_DEVICE_PRODUCT="Generic"
OPENWRT_DEVICE_REVISION="v0"
OPENWRT_RELEASE="OpenWrt 23.05.5 r24106-10cc5fcd00"

What browsers do you see the problem on?

Firefox, Chrome, Safari, Microsoft Edge

Relevant log output

[adelton]

I'd agree that having one table for the headers and one for content, just to force a <hr/> between them is not how tables should be done -- see the current DOM: