Consistent left justify on phone application - html

Question

I’m writing a small web application, hopefully it looks aesthetic on phone. On a mobile phone, the font showing the selected clinics are center justified, I want to know how to insert a line break into the code, so that the options appear consistently justified left in the mobile version, regardless of the name of the options.
Update: I still maintain a spaced-out view on the computer version, after the change.
The problem can be reproduced if 670150 is keyed as postal code, age 22, Singapore, eligible, CHAS Orange, and just select the first option of GP and polyclinics.
Phone view
Computer view
Can someone help me out here? Here's the relevant code.
ResultsTab.js
import React from "react";
import PropTypes from "prop-types";
import SwipeableViews from "react-swipeable-views";
import { makeStyles, useTheme } from "#material-ui/core/styles";
import AppBar from "#material-ui/core/AppBar";
import Tabs from "#material-ui/core/Tabs";
import Tab from "#material-ui/core/Tab";
import Typography from "#material-ui/core/Typography";
// import MyMap from "./myMap";
import TestMap from "./TestMap";
import PcDialog from "./PcDialog";
import GpDialog from "./GpDialog";
// import { display } from "#material-ui/system";
import CompareDialog from "./CompareDialog";
import Grid from "#material-ui/core/Grid";
import Paper from "#material-ui/core/Paper";
function TabContainer({ children, dir }) {
return (
<Typography component="div" dir={dir} style={{ padding: 8 * 3 }}>
{children}
</Typography>
);
}
TabContainer.propTypes = {
children: PropTypes.node.isRequired,
dir: PropTypes.string.isRequired
};
const useStyles = makeStyles(theme => ({
root: {
backgroundColor: theme.palette.background.paper,
width: "100%"
}
}));
const ResultTabs = props => {
const classes = useStyles();
const theme = useTheme();
const [value, setValue] = React.useState(0);
const [state, setState] = React.useState({
sortByLoc: true
});
function handleChange(event, newValue) {
setValue(newValue);
}
function handleChangeIndex(index) {
setValue(index);
}
const [open, setOpen] = React.useState(false);
const [selectedGP, setSelectedGP] = React.useState({
properties: { HCI_NAME: "Please Choose a GP" },
distance: "x",
price: "x",
rating: "x"
});
const [selectedPC, setSelectedPC] = React.useState({
Name: "Please choose a Polyclinic",
distance: "x",
price: "x",
rating: "x"
});
const [GPName, setGPName] = React.useState("none");
const [PCName, setPCName] = React.useState("none");
function handleClickOpen() {
setOpen(true);
}
const handleGPClose = (clinic, name) => {
setOpen(false);
clinic.price = "$$";
clinic.rating = "4.3";
setSelectedGP(clinic);
setGPName(name);
};
const handlePCClose = (clinic, name) => {
setOpen(false);
clinic.price = "$";
clinic.rating = "4.0";
setSelectedPC(clinic);
setPCName(name);
};
return (
<div className={classes.root}>
<Grid style={{ flexGrow: 1 }} direction="row">
<Grid container justify="space-evenly">
<Grid item>Selected GP: {GPName}</Grid>
<Grid item>
<p style={{ fontSize: "1em" }}>Selected PolyClinic: {PCName}</p>
{/* {console.log(selectedGP)} */}
</Grid>
</Grid>
</Grid>
<Grid style={{ flexGrow: 1 }} direction="row">
<Grid container justify="center">
<CompareDialog
GP={selectedGP}
PC={selectedPC}
formData={props.formData}
/>
</Grid>
</Grid>
<hr />
<AppBar position="static" color="default">
<Tabs
value={value}
onChange={handleChange}
indicatorColor="primary"
textColor="primary"
variant="fullWidth"
>
<Tab label="GP" />
<Tab label="Polyclinic" />
<Tab label="Map View" />
</Tabs>
</AppBar>
<SwipeableViews
axis={theme.direction === "rtl" ? "x-reverse" : "x"}
index={value}
onChangeIndex={handleChangeIndex}
>
<TabContainer dir={theme.direction}>
{props.GP.map(clinic => {
return (
<div key={clinic.properties.id}>
<GpDialog
clinic={clinic}
selectedGP={selectedGP}
open={open}
onClose={handleGPClose}
/>
<hr />
</div>
);
})}
</TabContainer>
<TabContainer dir={theme.direction}>
{props.PC.map(clinic => {
return (
<div key={clinic.id}>
<PcDialog
clinic={clinic}
selectedPC={selectedGP}
open={open}
onClose={handlePCClose}
/>
<hr />
</div>
);
})}
</TabContainer>
<TabContainer dir={theme.direction}>
{props.currentLoc[0] !== 0 && (
<TestMap coord={props.currentLoc} GP={props.GP} PC={props.PC} />
)}
</TabContainer>
</SwipeableViews>
</div>
);
};
export default ResultTabs;
FilteredResults.js
import React from "react";
import GP from "./chas.json";
import * as turf from "#turf/turf";
import ResultTabs from "./ResultTabs.js";
import PC from "./polyclinics.json";
import Button from "#material-ui/core/Button";
import Switch from "#material-ui/core/Switch";
import Grid from "#material-ui/core/Grid";
const API_KEY = "";
// this component aims to display the filtered clinic after they fill in the form
//try not to abuse the API call, im using some kind of free credits from google for this
//api to be able to consistenly make the api call
//api in use here are: google geocode & turf
//everything works except for styling, but the content from the json file abit lacking,
// no opening hrs etc
class FilteredResult extends React.Component {
constructor(props) {
super(props);
this.state = {
formData: this.props.location.state, //this gets the info from react router from Form.js
userLng: 0,
userLat: 0,
sortByLoc: true
};
this.goBack = this.goBack.bind(this);
}
componentDidMount() {
fetch(
`https://maps.googleapis.com/maps/api/geocode/json?address=${
this.state.formData.postalCode
}&region=sg&key=${API_KEY}`
)
.then(res => res.json())
.then(json => {
this.setState({
userLng: json.results[0].geometry.location.lng,
userLat: json.results[0].geometry.location.lat
});
});
}
goBack() {
this.props.history.goBack();
}
render(props) {
const { userLat, userLng, formData } = this.state;
const filteredGP = GP.features.filter(clinic => {
const from = turf.point([userLng, userLat]);
const to = turf.point([
clinic.geometry.coordinates[0],
clinic.geometry.coordinates[1]
]);
const options = { units: "kilometers" };
const dist = turf.distance(from, to, options);
clinic.distance = dist;
if (formData.hasSubsidy === "Yes") {
return (
dist <= 3
// && clinic.properties.CLINIC_PROGRAMME_CODE.includes(formData.subsidyType)
);
}
return dist <= 3;
});
const filteredPC = PC.clinics.filter(clinic => {
const from = turf.point([userLng, userLat]);
const to = turf.point([clinic.coord[0], clinic.coord[1]]);
const options = { units: "kilometers" };
const dist = turf.distance(from, to, options);
clinic.distance = dist;
return dist <= 100;
});
function sortDist(a, b) {
if (a.distance < b.distance) {
return -1;
} else {
return 1;
}
}
const handleSwitch = name => event => {
this.setState({ [name]: event.target.checked });
};
const sortedGP = filteredGP.sort(sortDist);
const sortedPC = filteredPC.sort(sortDist);
//note: dangerouslySetInnerHTML cos the json is in string, but its actually HTML
return (
<div>
<Grid container justify="center">
<h2>
Filtered clinics for{" "}
<span style={{ fongWeight: "bold", textDecoration: "underline" }}>
S{formData.postalCode}
</span> {" "}
{formData.subsidyType === ""
? ""
: `with ${formData.subsidyType} subsidy`}
</h2>
</Grid>
{/* <Switch
checked={this.state.sortByLoc}
onChange={handleSwitch('sortByLoc')}
value="sortByLoc"
inputProps={{ 'aria-label': 'secondary checkbox' }}
/> */}
<div>
<hr />
<ResultTabs
GP={sortedGP}
PC={sortedPC}
formData={formData}
currentLoc={[this.state.userLng, this.state.userLat]}
/>
<Button onClick={this.goBack}>Go Back</Button>
</div>
</div>
);
}
}
export default FilteredResult;

Answer 1

In the ResultTab.js inside the return give justify="left" instead of "space-evenly" for the Grid and I hope you will achieve what you wanted for phone application
<Grid container justify="left">
<Grid item>Selected GP: {GPName}</Grid>
<Grid item>
<p style={{ fontSize: "1em" }}>Selected PolyClinic: {PCName}</p>
{/* {console.log(selectedGP)} */}
</Grid>
</Grid>
</Grid>