From bc1d0a06769509d8fa2ae4218c719c51428e53f2 Mon Sep 17 00:00:00 2001
From: Nitish Sharma <nitishkumar81299@gmail.com>
Date: Tue, 28 Mar 2023 18:36:43 +0530
Subject: [PATCH 1/2] fixed responsiveness

---
 src/assets/index.html          | 2 +-
 src/assets/stylesheets/app.css | 3 ++-
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/assets/index.html b/src/assets/index.html
index dccf8dac..7f8d006e 100644
--- a/src/assets/index.html
+++ b/src/assets/index.html
@@ -318,7 +318,7 @@
           <span class="icon">{% inline "x.svg" %}</span>
         </button>
       </div>
-      <div v-if="itemSelectedDetails" ref="content" class="content px-4 pt-3 pb-5 border-top overflow-auto"
+      <div v-if="itemSelectedDetails" ref="content" class="d-flex justify-content-center align-items-start content px-4 pt-3 pb-5 border-top overflow-auto"
         :class="{'font-serif': theme.font == 'serif', 'font-monospace': theme.font == 'monospace'}"
         :style="{'font-size': theme.size + 'rem'}">
         <div class="content-wrapper">
diff --git a/src/assets/stylesheets/app.css b/src/assets/stylesheets/app.css
index 86e5a7fe..5cf5b94f 100644
--- a/src/assets/stylesheets/app.css
+++ b/src/assets/stylesheets/app.css
@@ -357,7 +357,8 @@ select.form-control:not([multiple]):not([size]) {
 
 .content-wrapper {
   max-width: 60rem;
-  margin: 0 auto;
+  margin-left: 3rem;
+  margin-right: 3rem;
 }
 
 .content img, .content video {

From c3ab30b8c690c5f7d16bf332efa602192b2415e8 Mon Sep 17 00:00:00 2001
From: Nitish Sharma <nitishkumar81299@gmail.com>
Date: Tue, 28 Mar 2023 18:37:16 +0530
Subject: [PATCH 2/2] Fixed back button navigation behaviour

---
 src/assets/javascripts/app.js | 9 +++++++++
 1 file changed, 9 insertions(+)

diff --git a/src/assets/javascripts/app.js b/src/assets/javascripts/app.js
index 906b91e5..3162d4eb 100644
--- a/src/assets/javascripts/app.js
+++ b/src/assets/javascripts/app.js
@@ -184,6 +184,12 @@ Vue.component('relative-time', {
 
 var vm = new Vue({
   created: function() {
+    window.addEventListener('popstate', (event)=>{
+      if(!this.itemSelected) 
+        this.feedSelected = null;
+      else
+        this.itemSelected = null;
+    });
     this.refreshStats()
       .then(this.refreshFeeds.bind(this))
       .then(this.refreshItems.bind(this, false))
@@ -312,12 +318,14 @@ var vm = new Vue({
       this.computeStats()
     },
     'feedSelected': function(newVal, oldVal) {
+      window.history.pushState(null, null);
       if (oldVal === undefined) return  // do nothing, initial setup
       api.settings.update({ feed: newVal }).then(this.refreshItems.bind(this, false))
       this.itemSelected = null
       if (this.$refs.itemlist) this.$refs.itemlist.scrollTop = 0
     },
     'itemSelected': function(newVal, oldVal) {
+      window.history.pushState(null, null);
       this.itemSelectedReadability = ''
       if (newVal === null) {
         this.itemSelectedDetails = null
@@ -405,6 +413,7 @@ var vm = new Vue({
         .then(function(values) {
           vm.folders = values[0]
           vm.feeds = values[1]
+          window.history.pushState(null, null);
         })
     },
     refreshItems: function(loadMore) {