Question: I'm trying to read a CSV file that I have on my computer in a Jupyter Notebook. I using Pandas pd.read\_csv(file path)
but I'm getting this error:

```
File "C:\Users\pc\AppData\Local\Temp/ipykernel_15328/2333079912.py", line 1
flight_df=pd.read_csv('C:\Users\pc\Desktop\Work\flight.csv')
                                                           ^
SyntaxError: (unicode error) 'unicodeescape' codec can't decode bytes in position 2-3: 
truncated \UXXXXXXXX escape

```

Here is my code so far:

```
#Calling Libraries
import numpy as np
import pandas as pd
import datetime as dt
import matplotlib.pyplot as plt

flight_df=pd.read_csv('C:\Users\pc\Desktop\Work\flight.csv')

```

Answer: 
First, I'm not great with CSS, so it's very possible that there's a more elegant solution that what I'm suggesting.

I notice that the modal/dialog does not have a max-height and is ending up using the available height on the page. This is what is leading to the *long* modal in the first place---both on desktop and mobile. One way to fix the issue you're running into is to simply give it a `max-height`.

**src/components/SimpleModal.vue**  

Add a class (e.g. `.dialog`) to the modal container (parent of `DialogTitle`) and simply apply some CSS rules to it.

```
<style scoped>
// Tailwind seems to be applying the following rules:
// margin-top: 2rem;
// margin-bottom: 2rem;
// Take control of this if needed and apply it ourselves

.dialog {
  --dialog-margin-y: 2rem;
  --dialog-max-height: 100vh;
  margin-top: var(--dialog-margin-y);
  margin-bottom: var(--dialog-margin-y);
  max-height: calc(var(--dialog-max-height) - calc(2 * var(--dialog-margin-y)));
  overflow-y: auto; // We're going to need this since we're fixing max-height
}
</style>

```

With these rules in place, this is what I observe:

**Desktop**
[![enter image description here](https://i.stack.imgur.com/ZStVk.gif)](https://i.stack.imgur.com/ZStVk.gif)

**Mobile**
[![enter image description here](https://i.stack.imgur.com/XSpnh.gif)](https://i.stack.imgur.com/XSpnh.gif)

Here's a screengrab of my Android device

[![enter image description here](https://i.stack.imgur.com/VsID1.gif)](https://i.stack.imgur.com/VsID1.gif)
Your modal is getting generated while you scrolled to the bottom and there is no place below for modal to take place. so the modal will get upper place and your viewpoint will be the bottom of it.

So now as a workaround I would give the modal a fixed height or at least a max height based on **view height**.

Give this `max-height: calc(100vh - 64px)` and this `overflow-y: auto` to your modal container.

Now your modal will take up to `100vh - 64px` of the screen height and if it has more content it will scroll inside the modal.

It will prevent other UI bugs in the future. for example if your modal height be more that page height it will cause a UI bug. with this solution you will prevent it.

```
.modal-container {
  max-height: calc(100vh - 64px);
  overflow-y: auto;
}

```