fix firefox randomly throwing roles into space

ui/components/demos/tap.js

@@ -5,7 +5,9 @@ import Role from '../role/demo'
 import demoRoles from '../../config/demo'
 
 const DemoWrapper = styled.div`
-  text-align: center;
+  justify-content: center;
+  display: flex;
+  flex-wrap: wrap;
 `
 
 export default () => <DemoWrapper>

ui/components/role/role.styled.js

@@ -9,7 +9,7 @@ export default styled.div`
   cursor: pointer;
 
   position: relative;
-  display: inline-flex;
+  display: flex;
   overflow: hidden;
   align-items: center;
   justify-content: flex-start;
@@ -73,7 +73,7 @@ export default styled.div`
     border: 1px solid var(--role-color-base);
     border-radius: 100%;
 
-    clip-path: border-box circle(50.2% at 50% 50%); /* firefox fix */
+    clip-path: border-box circle(50.2% at 50% 50%); /* this is just for you, firefox. */
 
     transform: rotateZ(0);
     ${(props: any) => (props.active) ? `

ui/pages/_internal/_server.js

@@ -32,6 +32,10 @@ const Hider = styled.div`
   /* ${(props: any) => props.visible ? '' : 'display: none;'} */
 `
 
+const RoleHolder = styled.div`
+  display: flex;
+  flex-wrap: wrap;
+`
 class Server extends React.Component<ServerPageProps> {
   static async getInitialProps (ctx: *, rpc: *, router: *) {
     const isDiscordBot = ctx.req && ctx.req.headers['user-agent'].includes('Discordbot')
@@ -92,11 +96,11 @@ class Server extends React.Component<ServerPageProps> {
         <Hider visible={true || currentServer.id !== null}>
           { !view.invalidated && view.categories.map(c => <Category key={`cat__${c.name}__${c.id}`}>
             <div>{ c.name }</div>
-            <div>
+            <RoleHolder>
               {
                 c._roles && c._roles.map(r => <Role key={`role__${r.name}__${r.id}`} role={r} active={view.selected.includes(r.id)} onToggle={this.onToggle(r)} disabled={!r.safe} />)
               }
-            </div>
+            </RoleHolder>
           </Category>) }
         </Hider>
       </div>