How can I arrange the data in a horizontal layout so that it manages increase in column widths. How can you manage such situations responsive design.
I want to make sure:
- Something that is technically feasible and justifies the effort
- Visual design maintains its balance
The web app is used by a financial firm to review trade clearances for their employees. All employees must submit a Trade pre clearance which is reviewed by their superiors while approving.
The supervisor get a list of TPC’s submitted by their subordinates. Onclick a modal window pops open and you see the trade details.
The contents of the modal have been carefully negotiated with the stakeholders and have no appetite on reducing content.
Also note, this app cannot be used on mobile
The standard of computer screen is 1280 px . If you see the center blue section, It has the meat of all the information contextual to the task. Most columns are fixed and don’t change in width , apart form Product name and Product type.
The product name could especially be very large and this destroys the balance of design. Since the modal is 70% of the screen size, so when product name is large we could increase its size and maintain single column.