diff --git a/packages/desktop-gui/cypress/integration/error_message_spec.js b/packages/desktop-gui/cypress/integration/error_message_spec.js
index 1a96212ff17..bcb03e41849 100644
--- a/packages/desktop-gui/cypress/integration/error_message_spec.js
+++ b/packages/desktop-gui/cypress/integration/error_message_spec.js
@@ -9,6 +9,27 @@ describe('Error Message', function () {
       type: 'PORT_IN_USE_SHORT',
     }
 
+    this.detailsErr = {
+      name: 'Error',
+      message: 'This is an error message explaining an event. Learn more about this event in the error details section.',
+      stack: '[object Object]↵',
+      details: 'ReferenceError: alsdkjf is not defined\n \
+\tat module.exports (/Users/lilaconlee/cypress/debug/desktop-gui-mishap/cypress/plugins/index.js:15:3)\n \
+\tat Promise.try (/Users/lilaconlee/cypress/cypress/packages/server/lib/plugins/child/run_plugins.js:62:12)\n \
+\tat tryCatcher (/Users/lilaconlee/cypress/cypress/packages/server/node_modules/bluebird/js/release/util.js:16:23)\n \
+\tat Function.Promise.attempt.Promise.try (/Users/lilaconlee/cypress/cypress/packages/server/node_modules/bluebird/js/release/method.js:39:29)\n \
+\tat load (/Users/lilaconlee/cypress/cypress/packages/server/lib/plugins/child/run_plugins.js:61:7)\n \
+\tat EventEmitter.ipc.on (/Users/lilaconlee/cypress/cypress/packages/server/lib/plugins/child/run_plugins.js:132:5)\n \
+\tat emitOne (events.js:115:13)\n \
+\tat EventEmitter.emit (events.js:210:7)\n \
+\tat process.<anonymous> (/Users/lilaconlee/cypress/cypress/packages/server/lib/plugins/util.coffee:18:7)\n \
+\tat emitTwo (events.js:125:13)\n \
+\tat process.emit (events.js:213:7)\n \
+\tat emit (internal/child_process.js:768:12)\n \
+\tat _combinedTickCallback (internal/process/next_tick.js:141:11)\n \
+\tat process._tickCallback (internal/process/next_tick.js:180:9)',
+    }
+
     cy.visitIndex().then((win) => {
       ({ start: this.start, ipc: this.ipc } = win.App)
 
@@ -103,29 +124,6 @@ describe('Error Message', function () {
   })
 
   it('shows error details if provided', function () {
-    const messageText = 'This is an error message explaining an event. Learn more about this event in the error details section.'
-
-    this.detailsErr = {
-      name: 'Error',
-      message: messageText,
-      stack: '[object Object]↵',
-      details: 'ReferenceError: alsdkjf is not defined\n \
-\tat module.exports (/Users/lilaconlee/cypress/debug/desktop-gui-mishap/cypress/plugins/index.js:15:3)\n \
-\tat Promise.try (/Users/lilaconlee/cypress/cypress/packages/server/lib/plugins/child/run_plugins.js:62:12)\n \
-\tat tryCatcher (/Users/lilaconlee/cypress/cypress/packages/server/node_modules/bluebird/js/release/util.js:16:23)\n \
-\tat Function.Promise.attempt.Promise.try (/Users/lilaconlee/cypress/cypress/packages/server/node_modules/bluebird/js/release/method.js:39:29)\n \
-\tat load (/Users/lilaconlee/cypress/cypress/packages/server/lib/plugins/child/run_plugins.js:61:7)\n \
-\tat EventEmitter.ipc.on (/Users/lilaconlee/cypress/cypress/packages/server/lib/plugins/child/run_plugins.js:132:5)\n \
-\tat emitOne (events.js:115:13)\n \
-\tat EventEmitter.emit (events.js:210:7)\n \
-\tat process.<anonymous> (/Users/lilaconlee/cypress/cypress/packages/server/lib/plugins/util.coffee:18:7)\n \
-\tat emitTwo (events.js:125:13)\n \
-\tat process.emit (events.js:213:7)\n \
-\tat emit (internal/child_process.js:768:12)\n \
-\tat _combinedTickCallback (internal/process/next_tick.js:141:11)\n \
-\tat process._tickCallback (internal/process/next_tick.js:180:9)',
-    }
-
     cy.stub(this.ipc, 'onProjectError').yields(null, this.detailsErr)
     this.start()
 
@@ -193,4 +191,24 @@ describe('Error Message', function () {
       })
     })
   })
+
+  it('does not overlay the nav/footer when long details are expanded (issue #4959)', function () {
+    this.detailsErr.details = `${this.detailsErr.details}${this.detailsErr.details}` // make details longer
+    this.ipc.openProject.rejects(this.detailsErr)
+    this.start()
+
+    cy.get('details').click()
+    cy.get('nav').should('be.visible')
+    cy.get('footer').should('be.visible')
+  })
+
+  it('it scrolls the error details when details are expanded (issue #4959)', function () {
+    this.detailsErr.details = `${this.detailsErr.details}${this.detailsErr.details}` // make details longer
+    this.ipc.openProject.rejects(this.detailsErr)
+    this.start()
+
+    cy.get('details').click()
+    cy.contains('Try Again').should('be.visible')
+    cy.get('.full-alert pre').should('have.css', 'overflow', 'auto')
+  })
 })
diff --git a/packages/desktop-gui/src/styles/components/_alerts.scss b/packages/desktop-gui/src/styles/components/_alerts.scss
index d2ec43af6b3..40c7e387068 100644
--- a/packages/desktop-gui/src/styles/components/_alerts.scss
+++ b/packages/desktop-gui/src/styles/components/_alerts.scss
@@ -42,12 +42,17 @@
   display: flex;
   flex-grow: 2;
   justify-content: center;
+  overflow: auto;
+  padding: 30px 60px;
 }
 
 .full-alert {
+  // `margin: auto` fixes issue with flexbox vertically-centered element + oveflow
+  // https://stackoverflow.com/questions/33454533/cant-scroll-to-top-of-flex-item-that-is-overflowing-container
+  margin: auto;
   overflow: auto;
-  text-align: center;
   padding: 20px;
+  text-align: center;
 
   .alert-content {
     text-align: left;
@@ -63,6 +68,11 @@
     padding: 1px 4px;
   }
 
+  pre {
+    max-height: 200px;
+    overflow: auto;
+  }
+
   summary {
     cursor: pointer;
     outline: none;