Add tabs to right holder page (#1132)

* added tabs and made page wrapper more responsive

* added badges to tabs

.mock/mockServiceWorker.js

@@ -1,4 +1,3 @@
-/* eslint-disable */
 /* tslint:disable */
 
 /**

.yarn/releases/yarn-4.5.1.cjs

@@ -1,5 +1,5 @@
 #!/usr/bin/env node
-/* eslint-disable */
+ 
 //prettier-ignore
 (()=>{var j3e=Object.create;var gT=Object.defineProperty;var G3e=Object.getOwnPropertyDescriptor;var Y3e=Object.getOwnPropertyNames;var W3e=Object.getPrototypeOf,K3e=Object.prototype.hasOwnProperty;var ve=(t=>typeof require<"u"?require:typeof Proxy<"u"?new Proxy(t,{get:(e,r)=>(typeof require<"u"?require:e)[r]}):t)(function(t){if(typeof require<"u")return require.apply(this,arguments);throw Error('Dynamic require of "'+t+'" is not supported')});var wt=(t,e)=>()=>(t&&(e=t(t=0)),e);var _=(t,e)=>()=>(e||t((e={exports:{}}).exports,e),e.exports),Kt=(t,e)=>{for(var r in e)gT(t,r,{get:e[r],enumerable:!0})},V3e=(t,e,r,o)=>{if(e&&typeof e=="object"||typeof e=="function")for(let a of Y3e(e))!K3e.call(t,a)&&a!==r&&gT(t,a,{get:()=>e[a],enumerable:!(o=G3e(e,a))||o.enumerable});return t};var et=(t,e,r)=>(r=t!=null?j3e(W3e(t)):{},V3e(e||!t||!t.__esModule?gT(r,"default",{value:t,enumerable:!0}):r,t));var Pi={};Kt(Pi,{SAFE_TIME:()=>cY,S_IFDIR:()=>VD,S_IFLNK:()=>zD,S_IFMT:()=>Hu,S_IFREG:()=>oI});var Hu,VD,oI,zD,cY,uY=wt(()=>{Hu=61440,VD=16384,oI=32768,zD=40960,cY=456789e3});var sr={};Kt(sr,{EBADF:()=>ho,EBUSY:()=>z3e,EEXIST:()=>t_e,EINVAL:()=>X3e,EISDIR:()=>e_e,ENOENT:()=>Z3e,ENOSYS:()=>J3e,ENOTDIR:()=>$3e,ENOTEMPTY:()=>n_e,EOPNOTSUPP:()=>i_e,EROFS:()=>r_e,ERR_DIR_CLOSED:()=>dT});function Ll(t,e){return Object.assign(new Error(`${t}: ${e}`),{code:t})}function z3e(t){return Ll("EBUSY",t)}function J3e(t,e){return Ll("ENOSYS",`${t}, ${e}`)}function X3e(t){return Ll("EINVAL",`invalid argument, ${t}`)}function ho(t){return Ll("EBADF",`bad file descriptor, ${t}`)}function Z3e(t){return Ll("ENOENT",`no such file or directory, ${t}`)}function $3e(t){return Ll("ENOTDIR",`not a directory, ${t}`)}function e_e(t){return Ll("EISDIR",`illegal operation on a directory, ${t}`)}function t_e(t){return Ll("EEXIST",`file already exists, ${t}`)}function r_e(t){return Ll("EROFS",`read-only filesystem, ${t}`)}function n_e(t){return Ll("ENOTEMPTY",`directory not empty, ${t}`)}function i_e(t){return Ll("EOPNOTSUPP",`operation not supported, ${t}`)}function dT(){return Ll("ERR_DIR_CLOSED","Directory handle was closed")}var JD=wt(()=>{});var Ia={};Kt(Ia,{BigIntStatsEntry:()=>cm,DEFAULT_MODE:()=>ET,DirEntry:()=>mT,StatEntry:()=>lm,areStatsEqual:()=>CT,clearStats:()=>XD,convertToBigIntStats:()=>o_e,makeDefaultStats:()=>AY,makeEmptyStats:()=>s_e});function AY(){return new lm}function s_e(){return XD(AY())}function XD(t){for(let e in t)if(Object.hasOwn(t,e)){let r=t[e];typeof r=="number"?t[e]=0:typeof r=="bigint"?t[e]=BigInt(0):yT.types.isDate(r)&&(t[e]=new Date(0))}return t}function o_e(t){let e=new cm;for(let r in t)if(Object.hasOwn(t,r)){let o=t[r];typeof o=="number"?e[r]=BigInt(o):yT.types.isDate(o)&&(e[r]=new Date(o))}return e.atimeNs=e.atimeMs*BigInt(1e6),e.mtimeNs=e.mtimeMs*BigInt(1e6),e.ctimeNs=e.ctimeMs*BigInt(1e6),e.birthtimeNs=e.birthtimeMs*BigInt(1e6),e}function CT(t,e){if(t.atimeMs!==e.atimeMs||t.birthtimeMs!==e.birthtimeMs||t.blksize!==e.blksize||t.blocks!==e.blocks||t.ctimeMs!==e.ctimeMs||t.dev!==e.dev||t.gid!==e.gid||t.ino!==e.ino||t.isBlockDevice()!==e.isBlockDevice()||t.isCharacterDevice()!==e.isCharacterDevice()||t.isDirectory()!==e.isDirectory()||t.isFIFO()!==e.isFIFO()||t.isFile()!==e.isFile()||t.isSocket()!==e.isSocket()||t.isSymbolicLink()!==e.isSymbolicLink()||t.mode!==e.mode||t.mtimeMs!==e.mtimeMs||t.nlink!==e.nlink||t.rdev!==e.rdev||t.size!==e.size||t.uid!==e.uid)return!1;let r=t,o=e;return!(r.atimeNs!==o.atimeNs||r.mtimeNs!==o.mtimeNs||r.ctimeNs!==o.ctimeNs||r.birthtimeNs!==o.birthtimeNs)}var yT,ET,mT,lm,cm,wT=wt(()=>{yT=et(ve("util")),ET=33188,mT=class{constructor(){this.name="";this.path="";this.mode=0}isBlockDevice(){return!1}isCharacterDevice(){return!1}isDirectory(){return(this.mode&61440)===16384}isFIFO(){return!1}isFile(){return(this.mode&61440)===32768}isSocket(){return!1}isSymbolicLink(){return(this.mode&61440)===40960}},lm=class{constructor(){this.uid=0;this.gid=0;this.size=0;this.blksize=0;this.atimeMs=0;this.mtimeMs=0;this.ctimeMs=0;this.birthtimeMs=0;this.atime=new Date(0);this.mtime=new Date(0);this.ctime=new Date(0);this.birthtime=new Date(0);this.dev=0;this.ino=0;this.mode=ET;this.nlink=1;this.rdev=0;this.blocks=1}isBlockDevice(){return!1}isCharacterDevice(){return!1}isDirectory(){return(this.mode&61440)===16384}isFIFO(){return!1}isFile(){return(this.mode&61440)===32768}isSocket(){return!1}isSymbolicLink(){return(this.mode&61440)===40960}},cm=class{constructor(){this.uid=BigInt(0);this.gid=BigInt(0);this.size=BigInt(0);this.blksize=BigInt(0);this.atimeMs=BigInt(0);this.mtimeMs=BigInt(0);this.ctimeMs=BigInt(0);this.birthtimeMs=BigInt(0);this.atimeNs=BigInt(0);this.mtimeNs=BigInt(0);this.ctimeNs=BigInt(0);this.birthtimeNs=BigInt(0);this.atime=new Date(0);this.mtime=new Date(0);this.ctime=new Date(0);this.birthtime=new Date(0);this.dev=BigInt(0);this.ino=BigInt(0);this.mode=BigInt(ET);this.nlink=BigInt(1);this.rdev=BigInt(0);this.blocks=BigInt(1)}isBlockDevice(){return!1}isCharacterDevice(){return!1}isDirectory(){return(this.mode&BigInt(61440))===BigInt(16384)}isFIFO(){return!1}isFile(){return(this.mode&BigInt(61440))===BigInt(32768)}isSocket(){return!1}isSymbolicLink(){return(this.mode&BigInt(61440))===BigInt(40960)}}});function A_e(t){let e,r;if(e=t.match(c_e))t=e[1];else if(r=t.match(u_e))t=`\\\\${r[1]?".\\":""}${r[2]}`;else return t;return t.replace(/\//g,"\\")}function f_e(t){t=t.replace(/\\/g,"/");let e,r;return(e=t.match(a_e))?t=`/${e[1]}`:(r=t.match(l_e))&&(t=`/unc/${r[1]?".dot/":""}${r[2]}`),t}function ZD(t,e){return t===Ae?pY(e):IT(e)}var aI,Bt,mr,Ae,K,fY,a_e,l_e,c_e,u_e,IT,pY,Ba=wt(()=>{aI=et(ve("path")),Bt={root:"/",dot:".",parent:".."},mr={home:"~",nodeModules:"node_modules",manifest:"package.json",lockfile:"yarn.lock",virtual:"__virtual__",pnpJs:".pnp.js",pnpCjs:".pnp.cjs",pnpData:".pnp.data.json",pnpEsmLoader:".pnp.loader.mjs",rc:".yarnrc.yml",env:".env"},Ae=Object.create(aI.default),K=Object.create(aI.default.posix);Ae.cwd=()=>process.cwd();K.cwd=process.platform==="win32"?()=>IT(process.cwd()):process.cwd;process.platform==="win32"&&(K.resolve=(...t)=>t.length>0&&K.isAbsolute(t[0])?aI.default.posix.resolve(...t):aI.default.posix.resolve(K.cwd(),...t));fY=function(t,e,r){return e=t.normalize(e),r=t.normalize(r),e===r?".":(e.endsWith(t.sep)||(e=e+t.sep),r.startsWith(e)?r.slice(e.length):null)};Ae.contains=(t,e)=>fY(Ae,t,e);K.contains=(t,e)=>fY(K,t,e);a_e=/^([a-zA-Z]:.*)$/,l_e=/^\/\/(\.\/)?(.*)$/,c_e=/^\/([a-zA-Z]:.*)$/,u_e=/^\/unc\/(\.dot\/)?(.*)$/;IT=process.platform==="win32"?f_e:t=>t,pY=process.platform==="win32"?A_e:t=>t;Ae.fromPortablePath=pY;Ae.toPortablePath=IT});async function $D(t,e){let r="0123456789abcdef";await t.mkdirPromise(e.indexPath,{recursive:!0});let o=[];for(let a of r)for(let n of r)o.push(t.mkdirPromise(t.pathUtils.join(e.indexPath,`${a}${n}`),{recursive:!0}));return await Promise.all(o),e.indexPath}async function hY(t,e,r,o,a){let n=t.pathUtils.normalize(e),u=r.pathUtils.normalize(o),A=[],p=[],{atime:h,mtime:E}=a.stableTime?{atime:H0,mtime:H0}:await r.lstatPromise(u);await t.mkdirpPromise(t.pathUtils.dirname(e),{utimes:[h,E]}),await BT(A,p,t,n,r,u,{...a,didParentExist:!0});for(let I of A)await I();await Promise.all(p.map(I=>I()))}async function BT(t,e,r,o,a,n,u){let A=u.didParentExist?await gY(r,o):null,p=await a.lstatPromise(n),{atime:h,mtime:E}=u.stableTime?{atime:H0,mtime:H0}:p,I;switch(!0){case p.isDirectory():I=await h_e(t,e,r,o,A,a,n,p,u);break;case p.isFile():I=await m_e(t,e,r,o,A,a,n,p,u);break;case p.isSymbolicLink():I=await y_e(t,e,r,o,A,a,n,p,u);break;default:throw new Error(`Unsupported file type (${p.mode})`)}return(u.linkStrategy?.type!=="HardlinkFromIndex"||!p.isFile())&&((I||A?.mtime?.getTime()!==E.getTime()||A?.atime?.getTime()!==h.getTime())&&(e.push(()=>r.lutimesPromise(o,h,E)),I=!0),(A===null||(A.mode&511)!==(p.mode&511))&&(e.push(()=>r.chmodPromise(o,p.mode&511)),I=!0)),I}async function gY(t,e){try{return await t.lstatPromise(e)}catch{return null}}async function h_e(t,e,r,o,a,n,u,A,p){if(a!==null&&!a.isDirectory())if(p.overwrite)t.push(async()=>r.removePromise(o)),a=null;else return!1;let h=!1;a===null&&(t.push(async()=>{try{await r.mkdirPromise(o,{mode:A.mode})}catch(D){if(D.code!=="EEXIST")throw D}}),h=!0);let E=await n.readdirPromise(u),I=p.didParentExist&&!a?{...p,didParentExist:!1}:p;if(p.stableSort)for(let D of E.sort())await BT(t,e,r,r.pathUtils.join(o,D),n,n.pathUtils.join(u,D),I)&&(h=!0);else(await Promise.all(E.map(async x=>{await BT(t,e,r,r.pathUtils.join(o,x),n,n.pathUtils.join(u,x),I)}))).some(x=>x)&&(h=!0);return h}async function g_e(t,e,r,o,a,n,u,A,p,h){let E=await n.checksumFilePromise(u,{algorithm:"sha1"}),I=420,D=A.mode&511,x=`${E}${D!==I?D.toString(8):""}`,C=r.pathUtils.join(h.indexPath,E.slice(0,2),`${x}.dat`),T;(ue=>(ue[ue.Lock=0]="Lock",ue[ue.Rename=1]="Rename"))(T||={});let L=1,U=await gY(r,C);if(a){let le=U&&a.dev===U.dev&&a.ino===U.ino,ce=U?.mtimeMs!==p_e;if(le&&ce&&h.autoRepair&&(L=0,U=null),!le)if(p.overwrite)t.push(async()=>r.removePromise(o)),a=null;else return!1}let z=!U&&L===1?`${C}.${Math.floor(Math.random()*4294967296).toString(16).padStart(8,"0")}`:null,te=!1;return t.push(async()=>{if(!U&&(L===0&&await r.lockPromise(C,async()=>{let le=await n.readFilePromise(u);await r.writeFilePromise(C,le)}),L===1&&z)){let le=await n.readFilePromise(u);await r.writeFilePromise(z,le);try{await r.linkPromise(z,C)}catch(ce){if(ce.code==="EEXIST")te=!0,await r.unlinkPromise(z);else throw ce}}a||await r.linkPromise(C,o)}),e.push(async()=>{U||(await r.lutimesPromise(C,H0,H0),D!==I&&await r.chmodPromise(C,D)),z&&!te&&await r.unlinkPromise(z)}),!1}async function d_e(t,e,r,o,a,n,u,A,p){if(a!==null)if(p.overwrite)t.push(async()=>r.removePromise(o)),a=null;else return!1;return t.push(async()=>{let h=await n.readFilePromise(u);await r.writeFilePromise(o,h)}),!0}async function m_e(t,e,r,o,a,n,u,A,p){return p.linkStrategy?.type==="HardlinkFromIndex"?g_e(t,e,r,o,a,n,u,A,p,p.linkStrategy):d_e(t,e,r,o,a,n,u,A,p)}async function y_e(t,e,r,o,a,n,u,A,p){if(a!==null)if(p.overwrite)t.push(async()=>r.removePromise(o)),a=null;else return!1;return t.push(async()=>{await r.symlinkPromise(ZD(r.pathUtils,await n.readlinkPromise(u)),o)}),!0}var H0,p_e,vT=wt(()=>{Ba();H0=new Date(456789e3*1e3),p_e=H0.getTime()});function eP(t,e,r,o){let a=()=>{let n=r.shift();if(typeof n>"u")return null;let u=t.pathUtils.join(e,n);return Object.assign(t.statSync(u),{name:n,path:void 0})};return new lI(e,a,o)}var lI,dY=wt(()=>{JD();lI=class{constructor(e,r,o={}){this.path=e;this.nextDirent=r;this.opts=o;this.closed=!1}throwIfClosed(){if(this.closed)throw dT()}async*[Symbol.asyncIterator](){try{let e;for(;(e=await this.read())!==null;)yield e}finally{await this.close()}}read(e){let r=this.readSync();return typeof e<"u"?e(null,r):Promise.resolve(r)}readSync(){return this.throwIfClosed(),this.nextDirent()}close(e){return this.closeSync(),typeof e<"u"?e(null):Promise.resolve()}closeSync(){this.throwIfClosed(),this.opts.onClose?.(),this.closed=!0}}});function mY(t,e){if(t!==e)throw new Error(`Invalid StatWatcher status: expected '${e}', got '${t}'`)}var yY,tP,EY=wt(()=>{yY=ve("events");wT();tP=class t extends yY.EventEmitter{constructor(r,o,{bigint:a=!1}={}){super();this.status="ready";this.changeListeners=new Map;this.startTimeout=null;this.fakeFs=r,this.path=o,this.bigint=a,this.lastStats=this.stat()}static create(r,o,a){let n=new t(r,o,a);return n.start(),n}start(){mY(this.status,"ready"),this.status="running",this.startTimeout=setTimeout(()=>{this.startTimeout=null,this.fakeFs.existsSync(this.path)||this.emit("change",this.lastStats,this.lastStats)},3)}stop(){mY(this.status,"running"),this.status="stopped",this.startTimeout!==null&&(clearTimeout(this.startTimeout),this.startTimeout=null),this.emit("stop")}stat(){try{return this.fakeFs.statSync(this.path,{bigint:this.bigint})}catch{let o=this.bigint?new cm:new lm;return XD(o)}}makeInterval(r){let o=setInterval(()=>{let a=this.stat(),n=this.lastStats;CT(a,n)||(this.lastStats=a,this.emit("change",a,n))},r.interval);return r.persistent?o:o.unref()}registerChangeListener(r,o){this.addListener("change",r),this.changeListeners.set(r,this.makeInterval(o))}unregisterChangeListener(r){this.removeListener("change",r);let o=this.changeListeners.get(r);typeof o<"u"&&clearInterval(o),this.changeListeners.delete(r)}unregisterAllChangeListeners(){for(let r of this.changeListeners.keys())this.unregisterChangeListener(r)}hasChangeListeners(){return this.changeListeners.size>0}ref(){for(let r of this.changeListeners.values())r.ref();return this}unref(){for(let r of this.changeListeners.values())r.unref();return this}}});function um(t,e,r,o){let a,n,u,A;switch(typeof r){case"function":a=!1,n=!0,u=5007,A=r;break;default:({bigint:a=!1,persistent:n=!0,interval:u=5007}=r),A=o;break}let p=rP.get(t);typeof p>"u"&&rP.set(t,p=new Map);let h=p.get(e);return typeof h>"u"&&(h=tP.create(t,e,{bigint:a}),p.set(e,h)),h.registerChangeListener(A,{persistent:n,interval:u}),h}function q0(t,e,r){let o=rP.get(t);if(typeof o>"u")return;let a=o.get(e);typeof a>"u"||(typeof r>"u"?a.unregisterAllChangeListeners():a.unregisterChangeListener(r),a.hasChangeListeners()||(a.stop(),o.delete(e)))}function j0(t){let e=rP.get(t);if(!(typeof e>"u"))for(let r of e.keys())q0(t,r)}var rP,DT=wt(()=>{EY();rP=new WeakMap});function E_e(t){let e=t.match(/\r?\n/g);if(e===null)return wY.EOL;let r=e.filter(a=>a===`\r
 `).length,o=e.length-r;return r>o?`\r

src/components/Paginering/AmPaginering.tsx

@@ -18,6 +18,7 @@ export const AmPagination = ({
   setCurrentPage,
   hideLabels = false,
   size = 'md',
+  className,
 }: AmPaginationProps) => {
   const { t } = useTranslation();
   const { pages, prevButtonProps, nextButtonProps } = usePagination({
@@ -29,7 +30,10 @@ export const AmPagination = ({
   });
 
   return (
-    <Pagination size={size}>
+    <Pagination
+      size={size}
+      className={className}
+    >
       <Pagination.List>
         <Pagination.Item>
           <Pagination.Button {...prevButtonProps}>

src/features/amUI/common/FakePageWrapper/FakePageWrapper.module.css

@@ -9,14 +9,14 @@
 }
 
 .menuButton {
-  width: 6rem;
+  width: 5rem;
   border-radius: 6px;
   background-color: #111d46;
   color: #ffffff;
   display: flex;
   justify-content: space-between;
   align-items: center;
-  padding: 0.5rem 0.5rem 0.5rem 1rem;
+  padding: 12px;
 }
 
 .companySquare {
@@ -55,3 +55,27 @@
 .pageContent {
   flex: 1;
 }
+
+@media only screen and (max-width: 900px) {
+  .sideMenu {
+    display: none;
+  }
+  .pageWrapper {
+    padding: 1em;
+  }
+}
+
+@media only screen and (max-width: 900px) {
+  .sideMenu {
+    display: none;
+  }
+  .pageWrapper {
+    padding: 1em;
+  }
+}
+
+@media only screen and (max-width: 769px) {
+  .pageWrapper {
+    padding: 0.5em;
+  }
+}

src/features/amUI/common/FakePageWrapper/FakePageWrapper.tsx

@@ -9,6 +9,8 @@ import {
 
 import AltinnTextLogo from '@/assets/AltinnTextLogo.svg?react';
 
+import { Avatar } from '../Avatar/Avatar';
+
 import classes from './FakePageWrapper.module.css';
 
 interface FakePageWrapperProps {
@@ -24,19 +26,24 @@ export const FakePageWrapper = ({
     <div className={classes.pageWrapper}>
       <div className={classes.topBar}>
         <AltinnTextLogo title='Altinn' />
-        <div>
-          <Search placeholder='Søk i Altinn' />
-        </div>
         <div className={classes.menuButton}>
           <span>Meny</span>
-          <div className={classes.companySquare} />
+          <Avatar
+            profile='organization'
+            size='sm'
+            name={reporteeName}
+          />
         </div>
       </div>
       <div className={classes.contentWrapper}>
         <div className={classes.sideMenu}>
           <Label className={classes.companyTitle}>
-            <span className={classes.companySquare} />
-            {reporteeName}
+            <Avatar
+              profile='serviceOwner'
+              size='lg'
+              name='Tilgangsstyring'
+            />
+            Tilgangsstyring
           </Label>
           <Divider />
           {[

src/features/amUI/common/PageContainer/PageContainer.module.css

@@ -1,6 +1,5 @@
 .container {
   min-height: 100vh;
-  width: 100%;
   background-color: var(--ds-color-neutral-contrast-1);
   box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.1);
   padding: 1rem;

src/features/amUI/userRightsPage/DelegationModal/DelegationModal.module.css

@@ -2,8 +2,8 @@
   max-width: 992px;
 }
 
-.content {
-  margin-bottom: 1em;
+.triggerButton {
+  width: fit-content;
 }
 
 .backButton {

src/features/amUI/userRightsPage/DelegationModal/DelegationModalContent.tsx

@@ -45,10 +45,11 @@ export const DelegationModalContent = ({ toParty }: DelegationModalProps) => {
   return (
     <Modal.Context>
       <Modal.Trigger
-        size='md'
-        variant='primary'
+        size='sm'
+        variant='secondary'
+        className={classes.triggerButton}
       >
-        {t('common.add')} <PlusIcon />
+        {t('single_rights.give_new_single_right')} <PlusIcon />
       </Modal.Trigger>
       <Modal
         className={classes.modalDialog}

src/features/amUI/userRightsPage/DelegationModal/ResourceInfo.tsx

@@ -82,14 +82,16 @@ export const ResourceInfo = ({ resource, toParty, onDelegate }: ResourceInfoProp
     userId: id || '',
   });
 
-  const userHasResource = delegatedResources?.some(
-    (delegation) => delegation.resource.identifier == resource?.identifier,
-  );
+  const userHasResource =
+    !!delegatedResources &&
+    delegatedResources.some((delegation) => delegation.resource.identifier == resource.identifier);
   useEffect(() => {
     if (delegatedResources && !isFetching) {
-      const resourceDelegation = delegatedResources.find(
-        (delegation) => delegation.resource.identifier === resource?.identifier,
-      );
+      const resourceDelegation =
+        !!delegatedResources &&
+        delegatedResources.find(
+          (delegation) => delegation.resource.identifier === resource.identifier,
+        );
       if (resourceDelegation) {
         setHasAccess(true);
         const rightKeys = resourceDelegation.delegation.rightDelegationResults.map(
@@ -255,7 +257,7 @@ export const ResourceInfo = ({ resource, toParty, onDelegate }: ResourceInfoProp
 
   return (
     <>
-      {resource && (
+      {!!resource && (
         <div className={classes.infoView}>
           <div className={classes.infoHeading}>
             <Avatar

src/features/amUI/userRightsPage/DelegationModal/ResourceSearch.module.css

@@ -2,7 +2,6 @@
   width: 100%;
   display: flex;
   gap: 12px;
-  align-items: end;
   padding-bottom: 5px;
 }
 

src/features/amUI/userRightsPage/DelegationModal/ResourceSearch.tsx

@@ -172,16 +172,17 @@ export const ResourceSearch = ({ onSelection }: ResourceSearchProps) => {
           </span>
         </span>
         <div className={classes.listItemRight}>
-          {delegatedResources?.some(
-            (delegation) => delegation.resource.identifier === resource.identifier,
-          ) && (
-            <Paragraph
-              size='xs'
-              className={classes.infoText}
-            >
-              {t('common.has_poa')}
-            </Paragraph>
-          )}
+          {!!delegatedResources &&
+            delegatedResources.some(
+              (delegation) => delegation.resource?.identifier === resource.identifier,
+            ) && (
+              <Paragraph
+                size='xs'
+                className={classes.infoText}
+              >
+                {t('common.has_poa')}
+              </Paragraph>
+            )}
           <ChevronRightIcon fontSize='1.5em' />
         </div>
       </ListItem>
@@ -199,7 +200,7 @@ export const ResourceSearch = ({ onSelection }: ResourceSearchProps) => {
         <div className={classes.searchField}>
           <Search
             label={t('single_rights.search_label')}
-            hideLabel={false}
+            hideLabel={true}
             value={searchString}
             onChange={(event: React.ChangeEvent<HTMLInputElement>) => {
               setSearchString(event.target.value);

src/features/amUI/userRightsPage/SingleRightsSection/SingleRightsSection.module.css

@@ -1,23 +1,22 @@
 .singleRightsSectionContainer {
   display: flex;
   flex-direction: column;
-  gap: 0.2rem;
-  padding: 2rem 0 0.5rem 0;
+  gap: 0.8rem;
+  padding: 1rem 0 0.5rem 0;
 }
 
 .singleRightsList {
   list-style-type: none;
   padding: 0.5rem 0;
   margin: 0;
-  min-height: 300px;
 }
 
 .singleRightItem {
   display: grid;
   grid-template-areas:
     'icon title type action'
     'icon owner type action';
-  grid-template-columns: 35px 1fr minmax(30px, 120px) 80px;
+  grid-template-columns: 35px 1fr 10px 80px;
   gap: 0 0.5rem;
   align-items: center;
 }