Crammed column views for mobile devices

[alryaz]

Deployment Type

Self-hosted

NetBox Version

v4.1.1

Python Version

3.11

Steps to Reproduce

1. Create a prefix (any family, any value)
2. Open newly created prefix on a mobile device (≤1440px width at ≥440ppi)
3. Columns appear horizontally

Expected Behavior

All columns display vertically (one above the other)

Observed Behavior

Columns behave horizontally, text overlaps (for lengthy values)

Additional information

This is the result of using class="col col-md-6". An opportunity for improvement lies within adding col-12 to the class list.

This likely applies to the following templates:

• users/objectpermission.html
• users/user.html
• users/group.html
• users/token.html
• generic/confirmation_form.html
• extras/object_configcontext.html
• extras/webhook.html
• extras/tag.html
• extras/customfield.html
• extras/customfieldchoiceset.html
• extras/eventrule.html
• extras/notificationgroup.html
• ipam/vrf.html
• ipam/routetarget.html
• ipam/prefix.html
• ipam/asn.html
• ipam/rir.html
• ipam/vlan.html
• ipam/asnrange.html
• ipam/servicetemplate.html
• ipam/fhrpgroup.html
• ipam/role.html
• ipam/vlangroup.html
• ipam/aggregate.html
• ipam/service.html
• ipam/iprange.html
• virtualization/virtualmachine.html
• virtualization/virtualdisk.html
• virtualization/vminterface.html
• virtualization/cluster_add_devices.html
• virtualization/clustergroup.html
• virtualization/clustertype.html
• virtualization/cluster.html
• core/objectchange.html
• core/datasource.html
• core/job.html
• vpn/ipsecproposal.html
• vpn/ikeproposal.html
• vpn/tunneltermination.html
• vpn/l2vpn.html
• vpn/l2vpntermination.html
• vpn/tunnelgroup.html
• vpn/ipsecpolicy.html
• vpn/ipsecprofile.html
• vpn/ikepolicy.html
• vpn/tunnel.html
• dcim/devicetype.html
• dcim/sitegroup.html
• dcim/rack.html
• dcim/interface.html
• dcim/site.html
• dcim/powerport.html
• dcim/platform.html
• dcim/moduletype.html
• dcim/virtualdevicecontext.html
• dcim/rackrole.html
• dcim/powerpanel.html
• dcim/region.html
• dcim/consoleserverport.html
• dcim/frontport.html
• dcim/modulebay.html
• dcim/rearport.html
• dcim/poweroutlet.html
• dcim/manufacturer.html
• dcim/inventoryitemrole.html
• dcim/inventoryitem.html
• dcim/rackreservation.html
• dcim/devicebay.html
• dcim/device.html
• dcim/devicerole.html
• dcim/cable.html
• dcim/devicebay_populate.html
• dcim/module.html
• dcim/consoleport.html
• dcim/powerfeed.html
• dcim/location.html
• wireless/wirelesslan.html
• wireless/wirelesslangroup.html
• wireless/wirelesslink.html
• tenancy/contactgroup.html
• tenancy/tenantgroup.html
• tenancy/contactrole.html
• account/profile.html
• circuits/circuittype.html
• circuits/circuitgroup.html
• circuits/provider.html
• circuits/circuittermination.html
• circuits/provideraccount.html
• circuits/circuit.html
• circuits/circuitgroupassignment.html
• circuits/providernetwork.html

[alryaz]

Quick fix I applied to my installation:
find netbox/templates/ -type f -name \*.html -print0 | xargs -0 sed -i 's/"col col-md-6"/"col col-12 col-md-6"/g'

[arthanson]

Screenshot showing the issue

[alryaz]

I am happy to do a PR if such fix is sufficient (my branch: https://github.com/alryaz/netbox/tree/patch-column-widths )

[arthanson]

@alryaz I'm assigning to you as it sounds like a you have a potential fix for a PR.