netbox icon indicating copy to clipboard operation
netbox copied to clipboard

Crammed column views for mobile devices

Open alryaz opened this issue 1 year ago • 4 comments

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 avatar Sep 26 '24 11:09 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'

alryaz avatar Sep 26 '24 11:09 alryaz

Screenshot showing the issue 10 112 0 0:15 | NetBox 2024-09-26 07-53-43

arthanson avatar Sep 26 '24 14:09 arthanson

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

alryaz avatar Sep 30 '24 03:09 alryaz

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

arthanson avatar Oct 10 '24 16:10 arthanson