keep code aligned when mobile

ragu-framework · Mar 8, 2021 · f596d0d · f596d0d
1 parent f29c16a
commit f596d0d
Showing 1 changed file with 11 additions and 1 deletion.
diff --git a/docs-mfe/components/command-list.js b/docs-mfe/components/command-list.js
@@ -48,13 +48,23 @@ const DescriptionNumberWrapper = styled.div`
   align-items: center;
 `
 
+const TaskWrapper = styled.div`
+  min-width: 100%;
+  max-width: 100%;
+  width: 100%;
+  
+  @media (max-width: 960px) {
+    margin-left: 52px;
+  }
+`;
+
 export const CommandListItem = ({number, description, task}) => <>
   <DescriptionNumberWrapper>
     <CommandListItemNumber>{number}</CommandListItemNumber>
     <CommandListItemDescription>{description}</CommandListItemDescription>
   </DescriptionNumberWrapper>
 
-  {task}
+  <TaskWrapper>{task}</TaskWrapper>
 </>
 
 export const CommandList = ({items}) => {