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

[zulipbot]

@Paperyduke6 You've referenced #862 in your pull request description, but you have not referenced them in your commit message description(s). Referencing an issue in a commit message automatically closes the corresponding issue when the commit is merged, which makes the issue tracker easier to manage.

Please run git commit --amend in your command line client to amend your commit message description with Fixes #862..

An example of a correctly-formatted commit:

commit fabd5e450374c8dde65ec35f02140383940fe146
Author: zulipbot
Date:   Sat Mar 18 13:42:40 2017 -0700

    pull requests: Check PR commits reference when issue is referenced.

    Fixes #51.

In addition, please make sure your commit structure and messages follow all guidelines.

[Paperyduke6]

This repo had package-lock.json as well which should have been ignored.