search

pacificclimate / scip-frontend

Salmon Climate Impacts Portal
GNU General Public License v3.0
1 stars 1 forks source link

Fix layout #44

Closed rod-glover closed 1 year ago

rod-glover commented 1 year ago

Hey, Lee, I decided try to fix the layout issue. My investigations pointed at the <header className="App-header> wrapper in the <App>. If you remove this wrapper altogether, then the Bootstrap CSS is not overridden and the layout looks like a standard Bootstrap app.

Questions:

  1. What was the intention in using the <header> wrapper? It is nominally intended for introductory and title content, but it wraps (wrapped) the entire app in this code.
  2. What was the intention of applying class App-header? It was almost certainly what was overriding the Bootstrap CSS. I left it in the App.css file in case it contains something particularly important for the project, but I think you could remove it.
corviday commented 1 year ago

Thank you for looking into this!

I didn't make any deliberate decisions on styling - everything is either created by create-react-app, or my own errors misusing the create-react-app components. I think what happened here is that 1) create-react-app made the app-header class, but that 2) shoving the whole of the app into it and wondering why my font size was so large was my very own mistake.

I have removed the styling for App-Header from the CSS.

rod-glover commented 1 year ago

Ah, that explains a lot. Yeah, the CRA example layout doesn't use Bootstrap (I think), and is pretty heavy handed. I am now almost certain you can lose the header wrapper. And very likely the wrapper <div className="App"> as well, along with all of App.css