Enable wrapping of actions in code view table (#1995)

At certain screen sizes the table in code view breaks if more than one action is available in a row. The fix enables the list of actions to wrap if the table is displayed on smaller sizes.

Co-authored-by: Eduard Heimbuch <eduard.heimbuch@cloudogu.com>
Co-authored-by: Matthias Thieroff <matthias.thieroff@cloudogu.com>

gradle/changelog/fix_breaking_code_table.yaml

@@ -0,0 +1,2 @@
+- type: fixed
+  description: Table in code view breaks at certain screensizes ([1992](https://github.com/scm-manager/scm-manager/issues/1992))

scm-ui/ui-components/src/__snapshots__/storyshots.test.ts.snap

@@ -553,7 +553,7 @@ exports[`Storyshots Buttons/AddButton Default 1`] = `
     type="button"
   >
     <i
-      className="fas fa-fw fa-plus has-text-inherit is-medium pr-1"
+      className="fas fa-fw fa-plus has-text-inherit is-medium pr-5"
       onKeyPress={[Function]}
     />
      
@@ -916,7 +916,7 @@ exports[`Storyshots Buttons/DeleteButton Default 1`] = `
     type="button"
   >
     <i
-      className="fas fa-fw fa-times has-text-inherit is-medium pr-1"
+      className="fas fa-fw fa-times has-text-inherit is-medium pr-5"
       onKeyPress={[Function]}
     />
      
@@ -2094,7 +2094,7 @@ exports[`Storyshots Forms/AddKeyValueEntryToTableField Default 1`] = `
       type="button"
     >
       <i
-        className="fas fa-fw fa-plus has-text-inherit is-medium pr-1"
+        className="fas fa-fw fa-plus has-text-inherit is-medium pr-5"
         onKeyPress={[Function]}
       />
        
@@ -2175,7 +2175,7 @@ exports[`Storyshots Forms/AddKeyValueEntryToTableField Disabled 1`] = `
       type="button"
     >
       <i
-        className="fas fa-fw fa-plus has-text-inherit is-medium pr-1"
+        className="fas fa-fw fa-plus has-text-inherit is-medium pr-5"
         onKeyPress={[Function]}
       />
        
@@ -4205,7 +4205,7 @@ exports[`Storyshots GroupEntry Default 1`] = `
             type="button"
           >
             <i
-              className="fas fa-fw fa-download has-text-inherit is-medium pr-1"
+              className="fas fa-fw fa-download has-text-inherit is-medium pr-5"
               onKeyPress={[Function]}
             />
              
@@ -4279,7 +4279,7 @@ exports[`Storyshots GroupEntry With long texts 1`] = `
             type="button"
           >
             <i
-              className="fas fa-fw fa-download has-text-inherit is-medium pr-1"
+              className="fas fa-fw fa-download has-text-inherit is-medium pr-5"
               onKeyPress={[Function]}
             />
              
@@ -22613,12 +22613,12 @@ exports[`Storyshots Repositories/Changesets Co-Authors with avatar 1`] = `
           >
             <a
               aria-label="changeset.buttons.details"
-              className="button is-default is-reduced-mobile"
+              className="button is-default is-reduced-mobile ChangesetButtonGroup__SwitcherButton-sc-19ag5s8-0 bPgAjN"
               href="/repo/hitchhiker/heartOfGold/code/changeset/b6c6f8fbd0d490936fae7d26ffdd4695cc2a0930"
               onClick={[Function]}
             >
               <i
-                className="fas fa-fw fa-exchange-alt has-text-inherit is-medium pr-1"
+                className="fas fa-fw fa-exchange-alt has-text-inherit is-medium pr-5"
                 onKeyPress={[Function]}
               />
                
@@ -22631,12 +22631,12 @@ exports[`Storyshots Repositories/Changesets Co-Authors with avatar 1`] = `
           >
             <a
               aria-label="changeset.buttons.sources"
-              className="button is-default is-reduced-mobile"
+              className="button is-default is-reduced-mobile ChangesetButtonGroup__SwitcherButton-sc-19ag5s8-0 bPgAjN"
               href="/repo/hitchhiker/heartOfGold/code/sources/b6c6f8fbd0d490936fae7d26ffdd4695cc2a0930"
               onClick={[Function]}
             >
               <i
-                className="fas fa-fw fa-code has-text-inherit is-medium pr-1"
+                className="fas fa-fw fa-code has-text-inherit is-medium pr-5"
                 onKeyPress={[Function]}
               />
                
@@ -22766,12 +22766,12 @@ exports[`Storyshots Repositories/Changesets Commiter and Co-Authors with avatar
           >
             <a
               aria-label="changeset.buttons.details"
-              className="button is-default is-reduced-mobile"
+              className="button is-default is-reduced-mobile ChangesetButtonGroup__SwitcherButton-sc-19ag5s8-0 bPgAjN"
               href="/repo/hitchhiker/heartOfGold/code/changeset/a88567ef1e9528a700555cad8c4576b72fc7c6dd"
               onClick={[Function]}
             >
               <i
-                className="fas fa-fw fa-exchange-alt has-text-inherit is-medium pr-1"
+                className="fas fa-fw fa-exchange-alt has-text-inherit is-medium pr-5"
                 onKeyPress={[Function]}
               />
                
@@ -22784,12 +22784,12 @@ exports[`Storyshots Repositories/Changesets Commiter and Co-Authors with avatar
           >
             <a
               aria-label="changeset.buttons.sources"
-              className="button is-default is-reduced-mobile"
+              className="button is-default is-reduced-mobile ChangesetButtonGroup__SwitcherButton-sc-19ag5s8-0 bPgAjN"
               href="/repo/hitchhiker/heartOfGold/code/sources/a88567ef1e9528a700555cad8c4576b72fc7c6dd"
               onClick={[Function]}
             >
               <i
-                className="fas fa-fw fa-code has-text-inherit is-medium pr-1"
+                className="fas fa-fw fa-code has-text-inherit is-medium pr-5"
                 onKeyPress={[Function]}
               />
                
@@ -22877,12 +22877,12 @@ exports[`Storyshots Repositories/Changesets Default 1`] = `
           >
             <a
               aria-label="changeset.buttons.details"
-              className="button is-default is-reduced-mobile"
+              className="button is-default is-reduced-mobile ChangesetButtonGroup__SwitcherButton-sc-19ag5s8-0 bPgAjN"
               href="/repo/hitchhiker/heartOfGold/code/changeset/e163c8f632db571c9aa51a8eb440e37cf550b825"
               onClick={[Function]}
             >
               <i
-                className="fas fa-fw fa-exchange-alt has-text-inherit is-medium pr-1"
+                className="fas fa-fw fa-exchange-alt has-text-inherit is-medium pr-5"
                 onKeyPress={[Function]}
               />
                
@@ -22895,12 +22895,12 @@ exports[`Storyshots Repositories/Changesets Default 1`] = `
           >
             <a
               aria-label="changeset.buttons.sources"
-              className="button is-default is-reduced-mobile"
+              className="button is-default is-reduced-mobile ChangesetButtonGroup__SwitcherButton-sc-19ag5s8-0 bPgAjN"
               href="/repo/hitchhiker/heartOfGold/code/sources/e163c8f632db571c9aa51a8eb440e37cf550b825"
               onClick={[Function]}
             >
               <i
-                className="fas fa-fw fa-code has-text-inherit is-medium pr-1"
+                className="fas fa-fw fa-code has-text-inherit is-medium pr-5"
                 onKeyPress={[Function]}
               />
                
@@ -22998,12 +22998,12 @@ exports[`Storyshots Repositories/Changesets Replacements 1`] = `
           >
             <a
               aria-label="changeset.buttons.details"
-              className="button is-default is-reduced-mobile"
+              className="button is-default is-reduced-mobile ChangesetButtonGroup__SwitcherButton-sc-19ag5s8-0 bPgAjN"
               href="/repo/hitchhiker/heartOfGold/code/changeset/d21cc6c359270aef2196796f4d96af65f51866dc"
               onClick={[Function]}
             >
               <i
-                className="fas fa-fw fa-exchange-alt has-text-inherit is-medium pr-1"
+                className="fas fa-fw fa-exchange-alt has-text-inherit is-medium pr-5"
                 onKeyPress={[Function]}
               />
                
@@ -23016,12 +23016,12 @@ exports[`Storyshots Repositories/Changesets Replacements 1`] = `
           >
             <a
               aria-label="changeset.buttons.sources"
-              className="button is-default is-reduced-mobile"
+              className="button is-default is-reduced-mobile ChangesetButtonGroup__SwitcherButton-sc-19ag5s8-0 bPgAjN"
               href="/repo/hitchhiker/heartOfGold/code/sources/d21cc6c359270aef2196796f4d96af65f51866dc"
               onClick={[Function]}
             >
               <i
-                className="fas fa-fw fa-code has-text-inherit is-medium pr-1"
+                className="fas fa-fw fa-code has-text-inherit is-medium pr-5"
                 onKeyPress={[Function]}
               />
                
@@ -23121,12 +23121,12 @@ exports[`Storyshots Repositories/Changesets With Committer 1`] = `
           >
             <a
               aria-label="changeset.buttons.details"
-              className="button is-default is-reduced-mobile"
+              className="button is-default is-reduced-mobile ChangesetButtonGroup__SwitcherButton-sc-19ag5s8-0 bPgAjN"
               href="/repo/hitchhiker/heartOfGold/code/changeset/d21cc6c359270aef2196796f4d96af65f51866dc"
               onClick={[Function]}
             >
               <i
-                className="fas fa-fw fa-exchange-alt has-text-inherit is-medium pr-1"
+                className="fas fa-fw fa-exchange-alt has-text-inherit is-medium pr-5"
                 onKeyPress={[Function]}
               />
                
@@ -23139,12 +23139,12 @@ exports[`Storyshots Repositories/Changesets With Committer 1`] = `
           >
             <a
               aria-label="changeset.buttons.sources"
-              className="button is-default is-reduced-mobile"
+              className="button is-default is-reduced-mobile ChangesetButtonGroup__SwitcherButton-sc-19ag5s8-0 bPgAjN"
               href="/repo/hitchhiker/heartOfGold/code/sources/d21cc6c359270aef2196796f4d96af65f51866dc"
               onClick={[Function]}
             >
               <i
-                className="fas fa-fw fa-code has-text-inherit is-medium pr-1"
+                className="fas fa-fw fa-code has-text-inherit is-medium pr-5"
                 onKeyPress={[Function]}
               />
                
@@ -23253,12 +23253,12 @@ exports[`Storyshots Repositories/Changesets With Committer and Co-Author 1`] = `
           >
             <a
               aria-label="changeset.buttons.details"
-              className="button is-default is-reduced-mobile"
+              className="button is-default is-reduced-mobile ChangesetButtonGroup__SwitcherButton-sc-19ag5s8-0 bPgAjN"
               href="/repo/hitchhiker/heartOfGold/code/changeset/a88567ef1e9528a700555cad8c4576b72fc7c6dd"
               onClick={[Function]}
             >
               <i
-                className="fas fa-fw fa-exchange-alt has-text-inherit is-medium pr-1"
+                className="fas fa-fw fa-exchange-alt has-text-inherit is-medium pr-5"
                 onKeyPress={[Function]}
               />
                
@@ -23271,12 +23271,12 @@ exports[`Storyshots Repositories/Changesets With Committer and Co-Author 1`] = `
           >
             <a
               aria-label="changeset.buttons.sources"
-              className="button is-default is-reduced-mobile"
+              className="button is-default is-reduced-mobile ChangesetButtonGroup__SwitcherButton-sc-19ag5s8-0 bPgAjN"
               href="/repo/hitchhiker/heartOfGold/code/sources/a88567ef1e9528a700555cad8c4576b72fc7c6dd"
               onClick={[Function]}
             >
               <i
-                className="fas fa-fw fa-code has-text-inherit is-medium pr-1"
+                className="fas fa-fw fa-code has-text-inherit is-medium pr-5"
                 onKeyPress={[Function]}
               />
                
@@ -23377,12 +23377,12 @@ exports[`Storyshots Repositories/Changesets With avatar 1`] = `
           >
             <a
               aria-label="changeset.buttons.details"
-              className="button is-default is-reduced-mobile"
+              className="button is-default is-reduced-mobile ChangesetButtonGroup__SwitcherButton-sc-19ag5s8-0 bPgAjN"
               href="/repo/hitchhiker/heartOfGold/code/changeset/e163c8f632db571c9aa51a8eb440e37cf550b825"
               onClick={[Function]}
             >
               <i
-                className="fas fa-fw fa-exchange-alt has-text-inherit is-medium pr-1"
+                className="fas fa-fw fa-exchange-alt has-text-inherit is-medium pr-5"
                 onKeyPress={[Function]}
               />
                
@@ -23395,12 +23395,12 @@ exports[`Storyshots Repositories/Changesets With avatar 1`] = `
           >
             <a
               aria-label="changeset.buttons.sources"
-              className="button is-default is-reduced-mobile"
+              className="button is-default is-reduced-mobile ChangesetButtonGroup__SwitcherButton-sc-19ag5s8-0 bPgAjN"
               href="/repo/hitchhiker/heartOfGold/code/sources/e163c8f632db571c9aa51a8eb440e37cf550b825"
               onClick={[Function]}
             >
               <i
-                className="fas fa-fw fa-code has-text-inherit is-medium pr-1"
+                className="fas fa-fw fa-code has-text-inherit is-medium pr-5"
                 onKeyPress={[Function]}
               />
                
@@ -23497,12 +23497,12 @@ exports[`Storyshots Repositories/Changesets With contactless signature 1`] = `
           >
             <a
               aria-label="changeset.buttons.details"
-              className="button is-default is-reduced-mobile"
+              className="button is-default is-reduced-mobile ChangesetButtonGroup__SwitcherButton-sc-19ag5s8-0 bPgAjN"
               href="/repo/hitchhiker/heartOfGold/code/changeset/e163c8f632db571c9aa51a8eb440e37cf550b825"
               onClick={[Function]}
             >
               <i
-                className="fas fa-fw fa-exchange-alt has-text-inherit is-medium pr-1"
+                className="fas fa-fw fa-exchange-alt has-text-inherit is-medium pr-5"
                 onKeyPress={[Function]}
               />
                
@@ -23515,12 +23515,12 @@ exports[`Storyshots Repositories/Changesets With contactless signature 1`] = `
           >
             <a
               aria-label="changeset.buttons.sources"
-              className="button is-default is-reduced-mobile"
+              className="button is-default is-reduced-mobile ChangesetButtonGroup__SwitcherButton-sc-19ag5s8-0 bPgAjN"
               href="/repo/hitchhiker/heartOfGold/code/sources/e163c8f632db571c9aa51a8eb440e37cf550b825"
               onClick={[Function]}
             >
               <i
-                className="fas fa-fw fa-code has-text-inherit is-medium pr-1"
+                className="fas fa-fw fa-code has-text-inherit is-medium pr-5"
                 onKeyPress={[Function]}
               />
                
@@ -23617,12 +23617,12 @@ exports[`Storyshots Repositories/Changesets With invalid signature 1`] = `
           >
             <a
               aria-label="changeset.buttons.details"
-              className="button is-default is-reduced-mobile"
+              className="button is-default is-reduced-mobile ChangesetButtonGroup__SwitcherButton-sc-19ag5s8-0 bPgAjN"
               href="/repo/hitchhiker/heartOfGold/code/changeset/e163c8f632db571c9aa51a8eb440e37cf550b825"
               onClick={[Function]}
             >
               <i
-                className="fas fa-fw fa-exchange-alt has-text-inherit is-medium pr-1"
+                className="fas fa-fw fa-exchange-alt has-text-inherit is-medium pr-5"
                 onKeyPress={[Function]}
               />
                
@@ -23635,12 +23635,12 @@ exports[`Storyshots Repositories/Changesets With invalid signature 1`] = `
           >
             <a
               aria-label="changeset.buttons.sources"
-              className="button is-default is-reduced-mobile"
+              className="button is-default is-reduced-mobile ChangesetButtonGroup__SwitcherButton-sc-19ag5s8-0 bPgAjN"
               href="/repo/hitchhiker/heartOfGold/code/sources/e163c8f632db571c9aa51a8eb440e37cf550b825"
               onClick={[Function]}
             >
               <i
-                className="fas fa-fw fa-code has-text-inherit is-medium pr-1"
+                className="fas fa-fw fa-code has-text-inherit is-medium pr-5"
                 onKeyPress={[Function]}
               />
                
@@ -23741,12 +23741,12 @@ exports[`Storyshots Repositories/Changesets With multiple Co-Authors 1`] = `
           >
             <a
               aria-label="changeset.buttons.details"
-              className="button is-default is-reduced-mobile"
+              className="button is-default is-reduced-mobile ChangesetButtonGroup__SwitcherButton-sc-19ag5s8-0 bPgAjN"
               href="/repo/hitchhiker/heartOfGold/code/changeset/b6c6f8fbd0d490936fae7d26ffdd4695cc2a0930"
               onClick={[Function]}
             >
               <i
-                className="fas fa-fw fa-exchange-alt has-text-inherit is-medium pr-1"
+                className="fas fa-fw fa-exchange-alt has-text-inherit is-medium pr-5"
                 onKeyPress={[Function]}
               />
                
@@ -23759,12 +23759,12 @@ exports[`Storyshots Repositories/Changesets With multiple Co-Authors 1`] = `
           >
             <a
               aria-label="changeset.buttons.sources"
-              className="button is-default is-reduced-mobile"
+              className="button is-default is-reduced-mobile ChangesetButtonGroup__SwitcherButton-sc-19ag5s8-0 bPgAjN"
               href="/repo/hitchhiker/heartOfGold/code/sources/b6c6f8fbd0d490936fae7d26ffdd4695cc2a0930"
               onClick={[Function]}
             >
               <i
-                className="fas fa-fw fa-code has-text-inherit is-medium pr-1"
+                className="fas fa-fw fa-code has-text-inherit is-medium pr-5"
                 onKeyPress={[Function]}
               />
                
@@ -23861,12 +23861,12 @@ exports[`Storyshots Repositories/Changesets With multiple signatures and invalid
           >
             <a
               aria-label="changeset.buttons.details"
-              className="button is-default is-reduced-mobile"
+              className="button is-default is-reduced-mobile ChangesetButtonGroup__SwitcherButton-sc-19ag5s8-0 bPgAjN"
               href="/repo/hitchhiker/heartOfGold/code/changeset/e163c8f632db571c9aa51a8eb440e37cf550b825"
               onClick={[Function]}
             >
               <i
-                className="fas fa-fw fa-exchange-alt has-text-inherit is-medium pr-1"
+                className="fas fa-fw fa-exchange-alt has-text-inherit is-medium pr-5"
                 onKeyPress={[Function]}
               />
                
@@ -23879,12 +23879,12 @@ exports[`Storyshots Repositories/Changesets With multiple signatures and invalid
           >
             <a
               aria-label="changeset.buttons.sources"
-              className="button is-default is-reduced-mobile"
+              className="button is-default is-reduced-mobile ChangesetButtonGroup__SwitcherButton-sc-19ag5s8-0 bPgAjN"
               href="/repo/hitchhiker/heartOfGold/code/sources/e163c8f632db571c9aa51a8eb440e37cf550b825"
               onClick={[Function]}
             >
               <i
-                className="fas fa-fw fa-code has-text-inherit is-medium pr-1"
+                className="fas fa-fw fa-code has-text-inherit is-medium pr-5"
                 onKeyPress={[Function]}
               />
                
@@ -23981,12 +23981,12 @@ exports[`Storyshots Repositories/Changesets With multiple signatures and not fou
           >
             <a
               aria-label="changeset.buttons.details"
-              className="button is-default is-reduced-mobile"
+              className="button is-default is-reduced-mobile ChangesetButtonGroup__SwitcherButton-sc-19ag5s8-0 bPgAjN"
               href="/repo/hitchhiker/heartOfGold/code/changeset/e163c8f632db571c9aa51a8eb440e37cf550b825"
               onClick={[Function]}
             >
               <i
-                className="fas fa-fw fa-exchange-alt has-text-inherit is-medium pr-1"
+                className="fas fa-fw fa-exchange-alt has-text-inherit is-medium pr-5"
                 onKeyPress={[Function]}
               />
                
@@ -23999,12 +23999,12 @@ exports[`Storyshots Repositories/Changesets With multiple signatures and not fou
           >
             <a
               aria-label="changeset.buttons.sources"
-              className="button is-default is-reduced-mobile"
+              className="button is-default is-reduced-mobile ChangesetButtonGroup__SwitcherButton-sc-19ag5s8-0 bPgAjN"
               href="/repo/hitchhiker/heartOfGold/code/sources/e163c8f632db571c9aa51a8eb440e37cf550b825"
               onClick={[Function]}
             >
               <i
-                className="fas fa-fw fa-code has-text-inherit is-medium pr-1"
+                className="fas fa-fw fa-code has-text-inherit is-medium pr-5"
                 onKeyPress={[Function]}
               />
                
@@ -24101,12 +24101,12 @@ exports[`Storyshots Repositories/Changesets With multiple signatures and valid s
           >
             <a
               aria-label="changeset.buttons.details"
-              className="button is-default is-reduced-mobile"
+              className="button is-default is-reduced-mobile ChangesetButtonGroup__SwitcherButton-sc-19ag5s8-0 bPgAjN"
               href="/repo/hitchhiker/heartOfGold/code/changeset/e163c8f632db571c9aa51a8eb440e37cf550b825"
               onClick={[Function]}
             >
               <i
-                className="fas fa-fw fa-exchange-alt has-text-inherit is-medium pr-1"
+                className="fas fa-fw fa-exchange-alt has-text-inherit is-medium pr-5"
                 onKeyPress={[Function]}
               />
                
@@ -24119,12 +24119,12 @@ exports[`Storyshots Repositories/Changesets With multiple signatures and valid s
           >
             <a
               aria-label="changeset.buttons.sources"
-              className="button is-default is-reduced-mobile"
+              className="button is-default is-reduced-mobile ChangesetButtonGroup__SwitcherButton-sc-19ag5s8-0 bPgAjN"
               href="/repo/hitchhiker/heartOfGold/code/sources/e163c8f632db571c9aa51a8eb440e37cf550b825"
               onClick={[Function]}
             >
               <i
-                className="fas fa-fw fa-code has-text-inherit is-medium pr-1"
+                className="fas fa-fw fa-code has-text-inherit is-medium pr-5"
                 onKeyPress={[Function]}
               />
                
@@ -24221,12 +24221,12 @@ exports[`Storyshots Repositories/Changesets With unknown signature 1`] = `
           >
             <a
               aria-label="changeset.buttons.details"
-              className="button is-default is-reduced-mobile"
+              className="button is-default is-reduced-mobile ChangesetButtonGroup__SwitcherButton-sc-19ag5s8-0 bPgAjN"
               href="/repo/hitchhiker/heartOfGold/code/changeset/e163c8f632db571c9aa51a8eb440e37cf550b825"
               onClick={[Function]}
             >
               <i
-                className="fas fa-fw fa-exchange-alt has-text-inherit is-medium pr-1"
+                className="fas fa-fw fa-exchange-alt has-text-inherit is-medium pr-5"
                 onKeyPress={[Function]}
               />
                
@@ -24239,12 +24239,12 @@ exports[`Storyshots Repositories/Changesets With unknown signature 1`] = `
           >
             <a
               aria-label="changeset.buttons.sources"
-              className="button is-default is-reduced-mobile"
+              className="button is-default is-reduced-mobile ChangesetButtonGroup__SwitcherButton-sc-19ag5s8-0 bPgAjN"
               href="/repo/hitchhiker/heartOfGold/code/sources/e163c8f632db571c9aa51a8eb440e37cf550b825"
               onClick={[Function]}
             >
               <i
-                className="fas fa-fw fa-code has-text-inherit is-medium pr-1"
+                className="fas fa-fw fa-code has-text-inherit is-medium pr-5"
                 onKeyPress={[Function]}
               />
                
@@ -24341,12 +24341,12 @@ exports[`Storyshots Repositories/Changesets With unowned signature 1`] = `
           >
             <a
               aria-label="changeset.buttons.details"
-              className="button is-default is-reduced-mobile"
+              className="button is-default is-reduced-mobile ChangesetButtonGroup__SwitcherButton-sc-19ag5s8-0 bPgAjN"
               href="/repo/hitchhiker/heartOfGold/code/changeset/e163c8f632db571c9aa51a8eb440e37cf550b825"
               onClick={[Function]}
             >
               <i
-                className="fas fa-fw fa-exchange-alt has-text-inherit is-medium pr-1"
+                className="fas fa-fw fa-exchange-alt has-text-inherit is-medium pr-5"
                 onKeyPress={[Function]}
               />
                
@@ -24359,12 +24359,12 @@ exports[`Storyshots Repositories/Changesets With unowned signature 1`] = `
           >
             <a
               aria-label="changeset.buttons.sources"
-              className="button is-default is-reduced-mobile"
+              className="button is-default is-reduced-mobile ChangesetButtonGroup__SwitcherButton-sc-19ag5s8-0 bPgAjN"
               href="/repo/hitchhiker/heartOfGold/code/sources/e163c8f632db571c9aa51a8eb440e37cf550b825"
               onClick={[Function]}
             >
               <i
-                className="fas fa-fw fa-code has-text-inherit is-medium pr-1"
+                className="fas fa-fw fa-code has-text-inherit is-medium pr-5"
                 onKeyPress={[Function]}
               />
                
@@ -24461,12 +24461,12 @@ exports[`Storyshots Repositories/Changesets With valid signature 1`] = `
           >
             <a
               aria-label="changeset.buttons.details"
-              className="button is-default is-reduced-mobile"
+              className="button is-default is-reduced-mobile ChangesetButtonGroup__SwitcherButton-sc-19ag5s8-0 bPgAjN"
               href="/repo/hitchhiker/heartOfGold/code/changeset/e163c8f632db571c9aa51a8eb440e37cf550b825"
               onClick={[Function]}
             >
               <i
-                className="fas fa-fw fa-exchange-alt has-text-inherit is-medium pr-1"
+                className="fas fa-fw fa-exchange-alt has-text-inherit is-medium pr-5"
                 onKeyPress={[Function]}
               />
                
@@ -24479,12 +24479,12 @@ exports[`Storyshots Repositories/Changesets With valid signature 1`] = `
           >
             <a
               aria-label="changeset.buttons.sources"
-              className="button is-default is-reduced-mobile"
+              className="button is-default is-reduced-mobile ChangesetButtonGroup__SwitcherButton-sc-19ag5s8-0 bPgAjN"
               href="/repo/hitchhiker/heartOfGold/code/sources/e163c8f632db571c9aa51a8eb440e37cf550b825"
               onClick={[Function]}
             >
               <i
-                className="fas fa-fw fa-code has-text-inherit is-medium pr-1"
+                className="fas fa-fw fa-code has-text-inherit is-medium pr-5"
                 onKeyPress={[Function]}
               />
                

scm-ui/ui-components/src/buttons/Button.tsx

@@ -70,7 +70,7 @@ const Button: FC<InnerProps> = ({
   innerRef
 }) => {
   const renderIcon = () => {
-    return <>{icon ? <Icon name={icon} color="inherit" className="is-medium pr-1" /> : null}</>;
+    return <>{icon ? <Icon name={icon} color="inherit" className="is-medium pr-5" /> : null}</>;
   };
 
   const classes = classNames(

scm-ui/ui-components/src/repos/changesets/ChangesetButtonGroup.tsx

@@ -26,6 +26,7 @@ import { Changeset, File, Repository } from "@scm-manager/ui-types";
 import { Button, ButtonAddons } from "../../buttons";
 import { createChangesetLink, createSourcesLink } from "./changesets";
 import { useTranslation } from "react-i18next";
+import styled from "styled-components";
 
 type Props = {
   repository: Repository;
@@ -33,14 +34,24 @@ type Props = {
   file?: File;
 };
 
+const SwitcherButton = styled(Button)`
+  padding-right: 0.75rem;
+  padding-left: 0.75rem;
+`;
+
 const ChangesetButtonGroup: FC<Props> = ({ repository, changeset, file }) => {
   const [t] = useTranslation("repos");
   const changesetLink = createChangesetLink(repository, changeset);
   const sourcesLink = createSourcesLink(repository, changeset, file);
   return (
     <ButtonAddons className="m-0">
-      <Button link={changesetLink} icon="exchange-alt" label={t("changeset.buttons.details")} reducedMobile={true} />
-      <Button link={sourcesLink} icon="code" label={t("changeset.buttons.sources")} reducedMobile={true} />
+      <SwitcherButton
+        link={changesetLink}
+        icon="exchange-alt"
+        label={t("changeset.buttons.details")}
+        reducedMobile={true}
+      />
+      <SwitcherButton link={sourcesLink} icon="code" label={t("changeset.buttons.sources")} reducedMobile={true} />
     </ButtonAddons>
   );
 };

scm-ui/ui-webapp/src/repos/codeSection/components/CodeViewSwitcher.tsx

@@ -23,17 +23,15 @@
  */
 import React, { FC } from "react";
 import styled from "styled-components";
-import { Button, ButtonAddons, devices } from "@scm-manager/ui-components";
+import { Button, ButtonAddons } from "@scm-manager/ui-components";
 import { useTranslation } from "react-i18next";
 
 const SmallButton = styled(Button)`
   border-radius: 4px;
   font-size: 1rem;
   font-weight: 600;
-  @media screen and (max-width: ${devices.mobile.width}px) {
-    padding-left: 0.75rem;
-    padding-right: 0.75rem;
-  }
+  padding-left: 0.75rem;
+  padding-right: 0.75rem;
 `;
 
 const ButtonAddonsMarginRight = styled(ButtonAddons)`

scm-ui/ui-webapp/src/repos/sources/components/FileTreeLeaf.tsx

@@ -27,7 +27,7 @@ import classNames from "classnames";
 import styled from "styled-components";
 import { binder, ExtensionPoint, extensionPoints } from "@scm-manager/ui-extensions";
 import { File, Repository } from "@scm-manager/ui-types";
-import { DateFromNow, FileSize, Icon, Tooltip } from "@scm-manager/ui-components";
+import { devices, DateFromNow, FileSize, Icon, Tooltip } from "@scm-manager/ui-components";
 import FileIcon from "./FileIcon";
 import FileLink from "./content/FileLink";
 import { ReactElement } from "react";
@@ -47,12 +47,15 @@ const NoWrapTd = styled.td`
 `;
 
 const ExtensionTd = styled.td`
-  white-space: nowrap;
+  white-space: break-spaces;
   text-align: right;
 
   > *:not(:last-child) {
     margin-right: 0.5rem;
   }
+  @media screen and (min-width: ${devices.widescreen.width}px) {
+    white-space: nowrap;
+  }
 `;
 
 class FileTreeLeaf extends React.Component<Props> {