React.js component in html header tag has its css misbehaving, button text gets cropped and div overflows screen, but only on iOS

Question

I'm building a static website using React and React-router. I have a navigation bar with routes to every page on the website. The JavaScript file for the navigation bar component looks like this:

import React from 'react';
import './navigation.css';
import { Link } from "react-router-dom";

function NavigationBar() {
    return (
        <div className='TopBar'>
            <Link to="/" >
                <button className='Buttons'>
                    Home
                </button>
            </Link>
            <Link to='/career'>
                <button className='Buttons'>
                    Career
                </button>
            </Link>
            <Link to='/projects'>
                <button className='Buttons'>
                    Projects
                </button>
            </Link>
            <Link to='/blog'>
                <button className='Buttons'>
                    Blog
                </button>
            </Link>
        </div>
    );
  }
  
  export default NavigationBar;

And its CSS looks like this:

.TopBar {
    width: auto;
    width: -webkit-fill-available;
    height: 100px;
    background-color: #0047AB;
    align-items: center;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    justify-content: space-evenly;
    display: flex;
}

.Buttons {
    background-color: #0047AB;
    color: white;
    max-width: 13%;
    width: auto;
    height: 100%;
    font-weight: bolder;
    font-size: x-large;
    border-width: 0px;
    font-family: 'helvetica';
    margin: auto;
    float: left;
}

.Buttons:hover {
    text-decoration: underline;
    font-size: x-large;
}

This component is called within my App.js file, inside the header tags:

<header  className="App-header">
  <NavigationBar/>
</header>

.App-header {
  height: 100px;
  display: flex;
  flex-direction: column;
  align-items: top;
  font-size: calc(10px + 2vmin);
  color: white;
}

Now, when I deploy my site using Github pages, it works perfectly fine on Android browsers or on PCs. But on Apple devices, I get this weird bug where the button's text gets cropped and the navigation bar overflows the device screen. Here's a screenshot:

Screenshot on iPhone

You can check how I intended that the navigation bar look visiting guerchenzon.com.

My question is, is this a bug on React on iOS? Am I doing something wrong? How can I fix this issue?

I tried to follow some stackoverflow answers, all to no success. I tried to add:

width: -webkit-fill-available;

To my navigation bar div. And also,

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />

to my index.html file.

Answer 1

Try to remove the max-width: 13% property inside your .Buttons class inside navigation.css.

It seems for that you do not need it, and is probably causing this behaviour.

And to be quite honest, there is no need for you to put a inside a element. You can remove that too.