From e7d7702e255df6c72d240fec8b5b77992e7f315a Mon Sep 17 00:00:00 2001
From: Muhammed Mustafa <MuhammedElruby@gmail.com>
Date: Mon, 6 Jun 2022 08:43:48 +0200
Subject: [PATCH] fix(client-UI): view button takes full width (#45964)

* added class to td so it takes full width

* added width 100% to dropbox components

* removed excessive code

* limit the max space dropdown takes

* `view` takes the same size as `show-solution`

* undo previous change

* view takes the same size as show-solution

* fix: static width for buttons on small screen

* fix: remove max-width cause iocd

Co-authored-by: moT01 <20648924+moT01@users.noreply.github.com>
---
 .../src/components/settings/certification.js  |  5 ++--
 .../solution-display-widget/index.tsx         | 30 ++++++++++---------
 2 files changed, 19 insertions(+), 16 deletions(-)

diff --git a/client/src/components/settings/certification.js b/client/src/components/settings/certification.js
index 60db0661773..54027261b95 100644
--- a/client/src/components/settings/certification.js
+++ b/client/src/components/settings/certification.js
@@ -264,10 +264,10 @@ export class CertificationSettings extends Component {
     return projectsMap[certName]
       .map(({ link, title, id }) => (
         <tr className='project-row' key={id}>
-          <td className='project-title col-sm-8'>
+          <td className='project-title col-sm-8 col-xs-8'>
             <Link to={link}>{title}</Link>
           </td>
-          <td className='project-solution col-sm-4'>
+          <td className='project-solution col-sm-4 col-xs-4'>
             {this.getProjectSolution(id, title)}
           </td>
         </tr>
@@ -278,6 +278,7 @@ export class CertificationSettings extends Component {
             <Button
               block={true}
               bsStyle='primary'
+              className={'col-xs-12'}
               href={certLocation}
               data-cy={`btn-for-${certSlug}`}
               onClick={createClickHandler(certSlug)}
diff --git a/client/src/components/solution-display-widget/index.tsx b/client/src/components/solution-display-widget/index.tsx
index 07465518c8c..c96f1b084b5 100644
--- a/client/src/components/solution-display-widget/index.tsx
+++ b/client/src/components/solution-display-widget/index.tsx
@@ -77,20 +77,22 @@ export function SolutionDisplayWidget({
     </Button>
   );
   const ShowMultifileProjectSolution = (
-    <DropdownButton
-      block={true}
-      bsStyle='primary'
-      className='btn-invert'
-      id={`dropdown-for-${id}`}
-      title={t('buttons.view')}
-    >
-      <MenuItem bsStyle='primary' onClick={showUserCode}>
-        {t('buttons.show-code')}
-      </MenuItem>
-      <MenuItem bsStyle='primary' onClick={showProjectPreview}>
-        {t('buttons.show-project')}
-      </MenuItem>
-    </DropdownButton>
+    <div className='solutions-dropdown'>
+      <DropdownButton
+        block={true}
+        bsStyle='primary'
+        className='btn-invert'
+        id={`dropdown-for-${id}`}
+        title={t('buttons.view')}
+      >
+        <MenuItem bsStyle='primary' onClick={showUserCode}>
+          {t('buttons.show-code')}
+        </MenuItem>
+        <MenuItem bsStyle='primary' onClick={showProjectPreview}>
+          {t('buttons.show-project')}
+        </MenuItem>
+      </DropdownButton>
+    </div>
   );
 
   const ShowProjectAndGithubLinks = (