ui: improve screen adaptability

inveniosoftware · Jul 8, 2024 · 93ff256 · 93ff256
1 parent 8a9e08a
commit 93ff256
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 4 deletions.
diff --git a/src/lib/pages/backoffice/Home/Home.js b/src/lib/pages/backoffice/Home/Home.js
@@ -31,15 +31,15 @@ export default class Home extends Component {
         </Grid.Row>
 
         <Grid.Row columns={2}>
-          <Grid.Column>
+          <Grid.Column tablet={16} computer={8}>
             <Divider hidden />
             <IdleLoansList />
             <Divider hidden />
             <OverdueLoansList />
             <Divider hidden />
             <RenewedLoansList />
           </Grid.Column>
-          <Grid.Column>
+          <Grid.Column tablet={16} computer={8}>
             <Divider hidden />
             <OverbookedDocumentsList />
             <Divider hidden />

diff --git a/...BorrowingRequest/BorrowingRequestSearch/BorrowingRequestList/BorrowingRequestListEntry.js b/...BorrowingRequest/BorrowingRequestSearch/BorrowingRequestList/BorrowingRequestListEntry.js
@@ -6,6 +6,7 @@ import React, { Component } from 'react';
 import { Link } from 'react-router-dom';
 import { Grid, Item, List } from 'semantic-ui-react';
 import { renderSubtitle } from '@modules/Document/utils';
+import { Truncate } from '@components/Truncate';
 
 export default class BorrowingRequestListEntry extends Component {
   renderLeftColumn = (brwReqMetadata) => {
@@ -136,7 +137,9 @@ export default class BorrowingRequestListEntry extends Component {
             data-test={`navigate-${brwReqMetadata.pid}`}
           >
             <ILLBorrowingRequestIcon />
-            {brwReqMetadata.document.title}
+            <Truncate lines={2} width="500px">
+              {brwReqMetadata.document.title}
+            </Truncate>
           </Item.Header>
           <Item.Meta>
             {renderSubtitle(brwReqMetadata.document?.alternative_titles)}

diff --git a/src/lib/pages/backoffice/Providers/ProviderSearch/ProviderListEntry.js b/src/lib/pages/backoffice/Providers/ProviderSearch/ProviderListEntry.js
@@ -6,6 +6,7 @@ import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 import { Link } from 'react-router-dom';
 import { Grid, Icon, Item, List } from 'semantic-ui-react';
+import { Truncate } from '@components/Truncate';
 
 const ProviderListInfo = ({ providerMetadata }) => (
   <List verticalAlign="middle" className="document-circulation">
@@ -115,7 +116,9 @@ export default class ProviderListEntry extends Component {
             data-test={`navigate-${providerMetadata.pid}`}
           >
             <ProviderIcon />
-            {providerMetadata.name}
+            <Truncate lines={2} width="500px">
+              {providerMetadata.name}
+            </Truncate>
           </Item.Header>
           <Item.Meta>
             Type: <strong>{providerMetadata.type}</strong>