Improve reconnect error page layout for resizing

[Paperyduke6]

Summary

Fixes #862 — Improves the reconnect error page layout, responsiveness,
and visual polish while staying close to the original design language.

Problem

The existing network error page had some layout issues:

• Fixed margin: 100px 200px on the content container caused the page
  to collapse or overflow on smaller window sizes
• Button spacing used a hardcoded margin-left: 116px on the Settings
  button, which was fragile and broke on non-default layouts
• The #buttons container used float: left for layout, which is
  outdated and conflicts with modern box model expectations
• The image had no size constraints, allowing it to overflow on narrow
  windows

Changes Made

HTML (network.html)

• Wrapped title, subtitle, description and buttons inside a new
  #error-text div to create a unified text block that aligns
  directly under the image

CSS (network.css)

• Replaced fixed margin: 100px 200px with max-width: 520px and
  margin: 60px auto so the card centres itself at any window width
• Added align-items: center to #content so image and text block
  stack centrally on the vertical axis
• Added #error-text { width: 100% } to keep text flush within the
  card without breaking left-alignment of the copy
• Replaced float: left and hardcoded margin-left: 116px on buttons
  with display: flex; gap: 12px on #buttons — cleaner, more
  maintainable
• Added max-width: 100%; width: 320px; display: block; margin: 0 auto
  to the image so it scales correctly and centres independently of the
  container
• Added a subtle card background with border-radius and box-shadow
  to visually separate the error state from a blank white page
• Added a gentle floating animation on the image to
  give the page a dynamic feel to it
• Added transition and transform on .button hover/active states
  for more tactile button feedback
• Added line-height: 1.8 to #description for better readability
  of the bullet list
• Used muted colour rgb(90 100 112) on subtitle and description to
  create visual hierarchy — title draws the eye first, explanation text
  reads second

Testing

• Tested by disconnecting network while app is running to trigger the
  error page
• Verified layout at multiple window sizes including narrow sidebar-open
  states

ScreenCapture

Reconnect.page.new.layout.mp4

[alya]

Hmm, I'd rather rework the whole design of this page than try to fix up the current one.

[Paperyduke6]

Do you want the new design to stay close to the original page, or follow a completely new layout? I thought the page could be improved, so I added button and image animations and centered them inside a box. Here’s the original reconnect page:

[alya]

It would be a completely new design.

[Paperyduke6]

Thanks for the feedback! Happy to take a broader approach if a full redesign
is the direction you'd prefer.

Do you have any design guidelines or a rough direction in mind (e.g. matching
the existing Zulip design system, a specific layout style)? I'd like to make
sure any redesign aligns with what the team is envisioning before I go too far
down.

I'm happy to put together a proposal or mockup first if that would help.

if you want it to be more consistent, it could be designed to be similar to the add organisation page:

[alya]

Unfortunately, I don't have the attention to work on a design for this right now.

[Paperyduke6]

Understood, no worries! I'll leave this here for when the time is right.
Happy to pick it back up if the team decides to move forward with a redesign.