Sandbox name resonance between sidebar and header (#1690)

* Fix #1680

* Pass a new reference of sandbox to CollectionInfo

* Add @samrith-s as a contributor

* * Added a comment for the need to pass new reference

* Used MobX toJS function over spreading

* Update link from GitHub to Twitter

Author: samrith-s

.all-contributorsrc

@@ -1085,6 +1085,15 @@
       "contributions": [
         "code"
       ]
+    },
+    {
+      "login": "samrith-s",
+      "name": "Samrith Shankar",
+      "avatar_url": "https://avatars3.githubusercontent.com/u/9032162?v=4",
+      "profile": "https://github.com/samrith-s",
+      "contributions": [
+        "code"
+      ]
     }
   ],
   "repoType": "github"

README.md

@@ -1,4 +1,4 @@
-# [CodeSandbox](https://codesandbox.io) [![Join the community on Spectrum](https://withspectrum.github.io/badge/badge.svg)](https://spectrum.chat/codesandbox) [![All Contributors](https://img.shields.io/badge/all_contributors-115-orange.svg?style=flat-square)](#contributors) [![CircleCI](https://circleci.com/gh/CompuIves/codesandbox-client.svg?style=svg)](https://circleci.com/gh/CompuIves/codesandbox-client) [![BrowserStack Status](https://www.browserstack.com/automate/badge.svg?badge_key=cVJuczlJWUtqWXhIbFN1ZjVQekF4NzNsd3phNEZRaGlWU0pHYVVkdGRFWT0tLXFtTVhaOWRySmN0ZG5QVDNDQ0g5Z0E9PQ==--79fe3eae4f149a400d396c9b12d3988f685785cf)](https://www.browserstack.com/automate/public-build/cVJuczlJWUtqWXhIbFN1ZjVQekF4NzNsd3phNEZRaGlWU0pHYVVkdGRFWT0tLXFtTVhaOWRySmN0ZG5QVDNDQ0g5Z0E9PQ==--79fe3eae4f149a400d396c9b12d3988f685785cf) [![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](http://makeapullrequest.com) [![first-timers-only Friendly](https://img.shields.io/badge/first--timers--only-friendly-blue.svg)](http://www.firsttimersonly.com/)
+# [CodeSandbox](https://codesandbox.io) [![Join the community on Spectrum](https://withspectrum.github.io/badge/badge.svg)](https://spectrum.chat/codesandbox) [![All Contributors](https://img.shields.io/badge/all_contributors-116-orange.svg?style=flat-square)](#contributors) [![CircleCI](https://circleci.com/gh/CompuIves/codesandbox-client.svg?style=svg)](https://circleci.com/gh/CompuIves/codesandbox-client) [![BrowserStack Status](https://www.browserstack.com/automate/badge.svg?badge_key=cVJuczlJWUtqWXhIbFN1ZjVQekF4NzNsd3phNEZRaGlWU0pHYVVkdGRFWT0tLXFtTVhaOWRySmN0ZG5QVDNDQ0g5Z0E9PQ==--79fe3eae4f149a400d396c9b12d3988f685785cf)](https://www.browserstack.com/automate/public-build/cVJuczlJWUtqWXhIbFN1ZjVQekF4NzNsd3phNEZRaGlWU0pHYVVkdGRFWT0tLXFtTVhaOWRySmN0ZG5QVDNDQ0g5Z0E9PQ==--79fe3eae4f149a400d396c9b12d3988f685785cf) [![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](http://makeapullrequest.com) [![first-timers-only Friendly](https://img.shields.io/badge/first--timers--only-friendly-blue.svg)](http://www.firsttimersonly.com/)
 
 [![Backers on Open Collective](https://opencollective.com/codesandbox/backers/badge.svg)](#backers) [![Sponsors on Open Collective](https://opencollective.com/codesandbox/sponsors/badge.svg)](#sponsors)
 
@@ -58,7 +58,8 @@ Thanks goes to these wonderful people
 | [<img src="https://avatars3.githubusercontent.com/u/18242829?v=4" width="100px;"/><br /><sub><b>Kelson448</b></sub>](https://github.com/Kelson448)<br />[💻](https://github.com/CompuIves/codesandbox-client/commits?author=Kelson448 "Code") | [<img src="https://avatars0.githubusercontent.com/u/980757?v=4" width="100px;"/><br /><sub><b>Ken Snyder</b></sub>](http://ken.net)<br />[💻](https://github.com/CompuIves/codesandbox-client/commits?author=ksnyde "Code") | [<img src="https://avatars0.githubusercontent.com/u/1500684?v=4" width="100px;"/><br /><sub><b>Kent C. Dodds</b></sub>](https://kentcdodds.com)<br />[💻](https://github.com/CompuIves/codesandbox-client/commits?author=kentcdodds "Code") | [<img src="https://avatars1.githubusercontent.com/u/1156093?v=4" width="100px;"/><br /><sub><b>Khaled Garbaya</b></sub>](https://khaledgarbaya.net)<br />[💻](https://github.com/CompuIves/codesandbox-client/commits?author=Khaledgarbaya "Code") | [<img src="https://avatars3.githubusercontent.com/u/1921130?v=4" width="100px;"/><br /><sub><b>Liu</b></sub>](https://jeezliu.github.io/)<br />[💻](https://github.com/CompuIves/codesandbox-client/commits?author=jeezliu "Code") | [<img src="https://avatars0.githubusercontent.com/u/11421186?v=4" width="100px;"/><br /><sub><b>Maciej</b></sub>](http://www.maciejmyslinski.com)<br />[💻](https://github.com/CompuIves/codesandbox-client/commits?author=maciejmyslinski "Code") | [<img src="https://avatars0.githubusercontent.com/u/2183490?v=4" width="100px;"/><br /><sub><b>Matthew Gadd</b></sub>](https://github.com/matt-gadd)<br />[💻](https://github.com/CompuIves/codesandbox-client/commits?author=matt-gadd "Code") |
 | [<img src="https://avatars1.githubusercontent.com/u/5899385?v=4" width="100px;"/><br /><sub><b>Miguel Carvajal</b></sub>](https://github.com/krvajal)<br />[💻](https://github.com/CompuIves/codesandbox-client/commits?author=krvajal "Code") | [<img src="https://avatars2.githubusercontent.com/u/8625066?v=4" width="100px;"/><br /><sub><b>Olaolu Olawuyi</b></sub>](https://olaolu.me)<br />[💻](https://github.com/CompuIves/codesandbox-client/commits?author=whizkydee "Code") | [<img src="https://avatars2.githubusercontent.com/u/7641760?v=4" width="100px;"/><br /><sub><b>Pete Nykänen</b></sub>](https://twitter.com/pete_tnt)<br />[💻](https://github.com/CompuIves/codesandbox-client/commits?author=petetnt "Code") | [<img src="https://avatars0.githubusercontent.com/u/741068?v=4" width="100px;"/><br /><sub><b>Phil Hughes</b></sub>](https://iamphill.com)<br />[💻](https://github.com/CompuIves/codesandbox-client/commits?author=iamphill "Code") | [<img src="https://avatars1.githubusercontent.com/u/1911623?v=4" width="100px;"/><br /><sub><b>Rodrigo Pombo</b></sub>](https://twitter.com/pomber)<br />[💻](https://github.com/CompuIves/codesandbox-client/commits?author=pomber "Code") | [<img src="https://avatars2.githubusercontent.com/u/163584?v=4" width="100px;"/><br /><sub><b>Sai Ram Kunala</b></sub>](https://sairam.xyz/)<br />[💻](https://github.com/CompuIves/codesandbox-client/commits?author=sairam "Code") | [<img src="https://avatars2.githubusercontent.com/u/8518239?v=4" width="100px;"/><br /><sub><b>The Gitter Badger</b></sub>](https://gitter.im)<br />[💻](https://github.com/CompuIves/codesandbox-client/commits?author=gitter-badger "Code") |
 | [<img src="https://avatars2.githubusercontent.com/u/762471?v=4" width="100px;"/><br /><sub><b>Tim Whitbeck</b></sub>](https://github.com/twhitbeck)<br />[💻](https://github.com/CompuIves/codesandbox-client/commits?author=twhitbeck "Code") | [<img src="https://avatars0.githubusercontent.com/u/465125?v=4" width="100px;"/><br /><sub><b>Wei Zhu</b></sub>](http://twitter.com/yesmeck)<br />[💻](https://github.com/CompuIves/codesandbox-client/commits?author=yesmeck "Code") | [<img src="https://avatars2.githubusercontent.com/u/5005153?v=4" width="100px;"/><br /><sub><b>Wil Wilsman</b></sub>](http://wilwilsman.com)<br />[💻](https://github.com/CompuIves/codesandbox-client/commits?author=wwilsman "Code") | [<img src="https://avatars1.githubusercontent.com/u/7959329?v=4" width="100px;"/><br /><sub><b>abnessor aka findoff</b></sub>](https://codepen.io/findoff/)<br />[💻](https://github.com/CompuIves/codesandbox-client/commits?author=findoff "Code") | [<img src="https://avatars1.githubusercontent.com/u/11937539?v=4" width="100px;"/><br /><sub><b>cottom</b></sub>](http://jerry-i.github.io)<br />[💻](https://github.com/CompuIves/codesandbox-client/commits?author=jerry-i "Code") | [<img src="https://avatars3.githubusercontent.com/u/7143133?v=4" width="100px;"/><br /><sub><b>gitname</b></sub>](https://github.com/gitname)<br />[💻](https://github.com/CompuIves/codesandbox-client/commits?author=gitname "Code") | [<img src="https://avatars3.githubusercontent.com/u/15030806?v=4" width="100px;"/><br /><sub><b>Bruce Xu</b></sub>](http://www.xulingming.cn)<br />[💻](https://github.com/CompuIves/codesandbox-client/commits?author=jackdon "Code") |
-| [<img src="https://avatars3.githubusercontent.com/u/7316730?v=4" width="100px;"/><br /><sub><b>jess</b></sub>](http://jessachandler.com)<br />[💻](https://github.com/CompuIves/codesandbox-client/commits?author=monkeywithacupcake "Code") | [<img src="https://avatars0.githubusercontent.com/u/8875406?v=4" width="100px;"/><br /><sub><b>Juliette Prétot</b></sub>](https://juliette.sh)<br />[💻](https://github.com/CompuIves/codesandbox-client/commits?author=juliettepretot "Code") | [<img src="https://avatars0.githubusercontent.com/u/25737281?v=4" width="100px;"/><br /><sub><b>Victoria Bergquist</b></sub>](https://twitter.com/vicbergquist)<br />[💻](https://github.com/CompuIves/codesandbox-client/commits?author=vicbergquist "Code") |
+| [<img src="https://avatars3.githubusercontent.com/u/7316730?v=4" width="100px;"/><br /><sub><b>jess</b></sub>](http://jessachandler.com)<br />[💻](https://github.com/CompuIves/codesandbox-client/commits?author=monkeywithacupcake "Code") | [<img src="https://avatars0.githubusercontent.com/u/8875406?v=4" width="100px;"/><br /><sub><b>Juliette Prétot</b></sub>](https://juliette.sh)<br />[💻](https://github.com/CompuIves/codesandbox-client/commits?author=juliettepretot "Code") | [<img src="https://avatars0.githubusercontent.com/u/25737281?v=4" width="100px;"/><br /><sub><b>Victoria Bergquist</b></sub>](https://twitter.com/vicbergquist)<br />[💻](https://github.com/CompuIves/codesandbox-client/commits?author=vicbergquist "Code") | [<img src="https://avatars3.githubusercontent.com/u/9032162?v=4" width="100px;"/><br /><sub><b>Samrith Shankar</b></sub>](https://twitter.com/tueieo)<br />[💻](https://github.com/CompuIves/codesandbox-client/commits?author=samrith-s "Code") |
+
 <!-- ALL-CONTRIBUTORS-LIST:END -->
 
 ## Backers

packages/app/src/app/pages/Sandbox/Editor/Header/index.tsx

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { toJS } from 'mobx';
 import { inject, observer } from 'mobx-react';
 
 import Fork from 'react-icons/lib/go/repo-forked';
@@ -154,7 +155,11 @@ const Header = ({ store, signals, zenMode }: Props) => {
 
       {sandbox.owned && (
         <Centered style={{ margin: '0 3rem' }}>
-          <CollectionInfo isLoggedIn={store.isLoggedIn} sandbox={sandbox} />
+          <CollectionInfo
+            isLoggedIn={store.isLoggedIn}
+            // Passing a clone of observable requires it to be called in render of observer
+            sandbox={toJS(sandbox)}
+          />
         </Centered>
       )}