feat(ui): revamp the response history list

[kobenguyent]

resolves #164

UI.Improvement.Response.History.webm

[netlify]

✅ Deploy Preview for chimerical-kitsune-a0bfa0 ready!

Name	Link
🔨 Latest commit	db118f0
🔍 Latest deploy log	https://app.netlify.com/sites/chimerical-kitsune-a0bfa0/deploys/66894deae9af8b0008ff1f9e
😎 Deploy Preview	https://deploy-preview-175--chimerical-kitsune-a0bfa0.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[flawiddsouza]

Heyo, this is broken:

[kobenguyent]

uh oh, I haven't noticed this. Shall be fixed for now.

[flawiddsouza]

Every response I select now says 2 hours ago here above, which is not very useful to id the request even though I did make the requests 2 hours ago. Before we used to be able to see hh:mm:ss, which helped with differentiating the response history selection. The url being there also helped when you switched environments and were checking responses.

[kobenguyent]

sure, could add the date time and url after time ago.

[flawiddsouza]

Looks good. Can we have | as separator instead of - after x seconds ago, so the separator is consistent?

[kobenguyent]

Looks good. Can we have | as separator instead of - after x seconds ago, so the separator is consistent?

sure!

[flawiddsouza]

Let's keep the z-index at 1. Any reason you changed it to 1000? Because it seems to work the same.

Also padding property. I prefer keeping it explicit since we're setting on padding top and bottom. padding 5px 0 works the same but I always forget which is which, as do a lot of people.

Always keep the css scoped inside a vue component. Else the css styles can accidentally apply to other things.

Remove this blank line.

These should be one after the other, instead of in the same line.