fix annoying scrollbar in Doraemon pannel

Author: mydearxym

containers/Doraemon/index.js

@@ -23,26 +23,24 @@ import {
   PageOverlay,
   PanelContainer,
   InfoBar,
-  Wraper,
+  Wrapper,
+  SuggestionWrapper,
   AlertBar,
-  // AvatarImg,
   AvatarWrapper,
   ContentWraper,
   Title,
   Desc,
   Hint,
-  // RepoLang,
-  // RepoStar,
-  // SubInfoWraper,
+  HintEnter,
 } from './styles'
 
 const debug = makeDebugger('C:Doraemon')
 
 const HintIcon = ({ index, active, cur }) => {
   return active === cur ? (
-    <Hint>
+    <HintEnter>
       <SuggestionIcons.enter />
-    </Hint>
+    </HintEnter>
   ) : (
     <Hint>^ {index}</Hint>
   )
@@ -74,25 +72,27 @@ class DoraemonContainer extends React.Component {
         <PanelContainer visible={visible}>
           <InputEditor value={inputValue} searching={false} prefix={prefix} />
           {logic.repoNotFound(store) && <AlertBar>Repo not found</AlertBar>}
-          <Wraper empty={suggestions.length === 0}>
-            {suggestions.map((suggestion, i) => (
-              <InfoBar
-                active={activeRaw === suggestion.raw}
-                key={suggestion.raw}
-                id={suggestion.raw}
-                onMouseEnter={logic.navToSuggestion.bind(this, suggestion)}
-              >
-                <AvatarWrapper>
-                  <NodeIcon raw={suggestion.raw} />
-                </AvatarWrapper>
-                <ContentWraper>
-                  <Title>{suggestion.title}</Title>
-                  <Desc>{suggestion.desc}</Desc>
-                </ContentWraper>
-                <HintIcon index={i} active={activeRaw} cur={suggestion.raw} />
-              </InfoBar>
-            ))}
-          </Wraper>
+          <Wrapper>
+            <SuggestionWrapper empty={suggestions.length === 0}>
+              {suggestions.map((suggestion, i) => (
+                <InfoBar
+                  active={activeRaw === suggestion.raw}
+                  key={suggestion.raw}
+                  id={suggestion.raw}
+                  onMouseEnter={logic.navToSuggestion.bind(this, suggestion)}
+                >
+                  <AvatarWrapper>
+                    <NodeIcon raw={suggestion.raw} />
+                  </AvatarWrapper>
+                  <ContentWraper>
+                    <Title>{suggestion.title}</Title>
+                    <Desc>{suggestion.desc}</Desc>
+                  </ContentWraper>
+                  <HintIcon index={i} active={activeRaw} cur={suggestion.raw} />
+                </InfoBar>
+              ))}
+            </SuggestionWrapper>
+          </Wrapper>
         </PanelContainer>
       </div>
     )

containers/Doraemon/styles/index.js

@@ -57,12 +57,19 @@ export const PanelContainer = styled.div`
   left: 50%;
   margin-left: -19vw;
 `
-export const Wraper = styled.div`
+export const Wrapper = styled.div`
+  width: 100%;
+  overflow: hidden;
+`
+
+export const SuggestionWrapper = styled.div`
   position: relative;
   display: ${props => (props.empty ? 'none' : 'flex')};
   flex-direction: column;
   max-height: 60vh;
-  overflow: scroll;
+  overflow-y: scroll;
+  overflow-x: hidden;
+  width: 102%;
 `
 
 // #001b21;
@@ -146,11 +153,13 @@ export const Desc = styled.div`
 export const Hint = styled.div`
   color: ${theme('u_panel.text')};
   margin-top: 10px;
+  margin-right: 15px;
   width: 30px;
-
-  > svg {
-    padding-right: 20px;
-  }
+`
+export const HintEnter = styled.div`
+  color: ${theme('u_panel.text')};
+  margin-top: 10px;
+  margin-right: 10px;
 `
 
 export const SubInfoWraper = styled.div`