fix: expand button spacing issue (argoproj#5258)

Signed-off-by: Regina Scott <rescott@redhat.com>
fengshunli · Jan 15, 2021 · e26ad30 · e26ad30
1 parent 534ec17
commit e26ad30
Show file tree

Hide file tree

Showing 2 changed files with 37 additions and 39 deletions.
diff --git a/ui/src/app/applications/components/application-status-panel/application-status-panel.scss b/ui/src/app/applications/components/application-status-panel/application-status-panel.scss
@@ -11,7 +11,7 @@
     box-shadow: 1px 2px 3px rgba(0, 0, 0, 0.1);
 
     &__item {
-        max-height: 75px;
+        max-height: 95px;
         margin: 10px 0;
         padding: 5px 20px;
         font-size: .8em;
@@ -111,6 +111,5 @@
         color: #8fa4B1;
         cursor: pointer;
         position: absolute;
-        bottom: 10px;
     }
 }
diff --git a/ui/src/app/applications/components/application-status-panel/application-status-panel.tsx b/ui/src/app/applications/components/application-status-panel/application-status-panel.tsx
@@ -101,44 +101,43 @@ export const ApplicationStatusPanel = ({application, showOperation, showConditio
                                 revision={appOperationState.syncResult.revision}
                             />
                         )) || <div className='application-status-panel__item-name'>{appOperationState.message}</div>}
-                        <br />
+                        <button
+                            className='view-application-status-full'
+                            onClick={() =>
+                                viewApplicationStatusFull(
+                                    // title of info popup
+                                    <div className={`info-popup-title application-status-panel__item-value application-status-panel__item-value--${appOperationState.phase}`}>
+                                        <a onClick={() => showOperation && showOperation()}>
+                                            {utils.getOperationStateTitle(application)}
+                                            <div className='info-popup-title__timestamp'>
+                                                - {appOperationState.phase} <Timestamp date={appOperationState.finishedAt || appOperationState.startedAt} />
+                                            </div>
+                                        </a>
+                                    </div>,
+                                    // content of info-popup
+                                    <div className='info-popup-content'>
+                                        {appOperationState.syncResult && appOperationState.syncResult.revision && (
+                                            <div className='info-popup-content__data'>
+                                                To <Revision repoUrl={application.spec.source.repoURL} revision={appOperationState.syncResult.revision} />
+                                            </div>
+                                        )}
+                                        {(appOperationState.syncResult && appOperationState.syncResult.revision && (
+                                            <div className='info-popup-content__data'>
+                                                <RevisionMetadataPanel
+                                                    appName={application.metadata.name}
+                                                    type={application.spec.source.chart && 'helm'}
+                                                    revision={appOperationState.syncResult.revision}
+                                                />
+                                            </div>
+                                        )) || <div className='info-popup-content__data'>{appOperationState.message}</div>}
+                                        <br />
+                                        <div>It has been {daysSinceLastSynchronized} days since last sync.</div>
+                                    </div>
+                                )
+                            }>
+                            Expand <i className='fas fa-angle-double-right' />
+                        </button>
                     </div>
-                    <button
-                        className='view-application-status-full'
-                        onClick={() =>
-                            viewApplicationStatusFull(
-                                // title of info popup
-                                <div className={`info-popup-title application-status-panel__item-value application-status-panel__item-value--${appOperationState.phase}`}>
-                                    <a onClick={() => showOperation && showOperation()}>
-                                        {utils.getOperationStateTitle(application)}
-                                        <div className='info-popup-title__timestamp'>
-                                            - {appOperationState.phase} <Timestamp date={appOperationState.finishedAt || appOperationState.startedAt} />
-                                        </div>
-                                    </a>
-                                </div>,
-                                // content of info-popup
-                                <div className='info-popup-content'>
-                                    {appOperationState.syncResult && appOperationState.syncResult.revision && (
-                                        <div className='info-popup-content__data'>
-                                            To <Revision repoUrl={application.spec.source.repoURL} revision={appOperationState.syncResult.revision} />
-                                        </div>
-                                    )}
-                                    {(appOperationState.syncResult && appOperationState.syncResult.revision && (
-                                        <div className='info-popup-content__data'>
-                                            <RevisionMetadataPanel
-                                                appName={application.metadata.name}
-                                                type={application.spec.source.chart && 'helm'}
-                                                revision={appOperationState.syncResult.revision}
-                                            />
-                                        </div>
-                                    )) || <div className='info-popup-content__data'>{appOperationState.message}</div>}
-                                    <br />
-                                    <div>It has been {daysSinceLastSynchronized} days since last sync.</div>
-                                </div>
-                            )
-                        }>
-                        Expand <i className='fas fa-angle-double-right' />
-                    </button>
                 </div>
             )}
             {application.status.conditions && (